Question

我正在为Bootstrap 3寻找模板/片段，这将创建一个具有以下特征的3项菜单：

桌面（1200px +） - 3个垂直列，居中。
平板电脑（~700px） - 3个水平列，图像左对齐，文本居中对齐移动设备（＆lt; 400px） - 与平板电脑相同，但堆叠在彼此之上。

我可以通过单独的媒体查询和破解每个布局的特定样式来做到这一点......但是我想节省一些时间和时间。未来的恶化（框架中的手工操作越少越好）。

这是我所拥有的屏幕截图，以及我想要拥有的照片商店模型（无法在线发布图片，信誉不足）。

目前：http://imgur.com/ETObiPv

通缉：http://imgur.com/gC7xb4K

Answer 1

我认为这对你有用。 DEMO

这种布局的主要内容是：

使用absolute positioning将文本容器的高度设置为图像的100％;
使用display: table-cell来完成文本的vertical alignment;
使用小型黑客＆＃39;这实际上产生了640px的xs断点。

<强> HTML：

<div class="container menu">
  <div class="row">
    <div class="col-xs-4">
        <div class="row menu-group">
            <div class="menu-img">
                <img src="http://placehold.it/250/e8117f/fff&text=Cool+Widgets" alt="Cool Widget" class="img-responsive" />
            </div>
            <div class="menu-title">
                <div class="tbl">
                    <div class="tcell">
                        <h4>Really Cool Widgets</h4>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /col-sm-4 -->
    <div class="col-xs-4">
        <div class="row menu-group">
            <div class="menu-img">
                <img src="http://placehold.it/250/05Ed9d/fff&text=Awesome+Gadgets" alt="Awesome Gadgets" class="img-responsive" />
            </div>
            <div class="menu-title">
                <div class="tbl">
                    <div class="tcell">
                        <h4>Awesome Gadgets</h4>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /col-sm-4 -->
    <div class="col-xs-4">
        <div class="row menu-group">
            <div class="menu-img">
                <img src="http://placehold.it/250/05e9ed/fff&text=Amazing+Stuff" alt="Amazing Stuff" class="img-responsive" />
            </div>
            <div class="menu-title">
                <div class="tbl">
                    <div class="tcell">
                        <h4>Amazing Stuff</h4>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /col-sm-4 -->
  </div> <!-- /row -->
</div> <!-- /container -->

CSS：

.menu-group { /*styles added to match your mockup*/
    border: 1px solid #000;
    padding: 5px;
    background-color: #ccc;
}
.menu-img {
    position: relative;
    float:left;
    width: 35%; /* adjust to suit but make sure to set the .menu-title left value to the same amount */
}
.menu-title {
    position: absolute;
    left: 35%; /* must match .menu-img width */
    width: 65%;  /* left value + width value must equal 100% */
    height: 100%;   
}
.tbl {
    display: table;
    height: 100%;
    width: 100%;
}
.tcell {
    display: table-cell;
    vertical-align: middle; 
    text-align: center;
    padding: 5px;
}
@media (min-width: 1200px) { 
.menu-img {
    position: relative;
    float:none;
    width:100%;
}
.menu-img img {
    margin: auto;
}
.menu-title {
    position: relative;
    left: 0;
    width: 100%;
}
.tbl {
    display: block;
    height: 100%;
    width: 100%;
}
.tcell {
    display: block;
}
}
@media (max-width:640px){ /* can be any value below 767 */
    .menu [class^="col-xs-"]{
        float:none;
        width:auto;
    }   
}

Bootstrap 3 - 具有/不同对齐的响应式菜单，适用于桌面/平板电脑/手机？

1 个答案: