Bootstrap 3 - 桌面/平板电脑/移动设备具有/不同对齐方式的响应式菜单？

Question

我正在寻找 Bootstrap 3 的模板/sn-p，它将创建具有以下特征的 3 项菜单：

桌面 (1200px+) - 3 个垂直列，居中。
平板电脑（~700 像素）- 3 个水平列，图像左对齐，文本居中对齐。
移动设备（

我可以使用单独的媒体查询并为每个布局修改特定样式...但希望节省一些时间和未来的麻烦（框架中的手工修改越少越好）。

这是我所拥有的截图，以及我想要拥有的 Photoshop 模型（不能内联发布图片，声誉不足）。

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

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

Answer 1

我认为这对你有用。 DEMO

这个布局的主要内容是：

1. 使用absolute positioning 使文本容器的高度为图像的100%；
2. 使用display: table-cell完成文字的vertical alignment；
3. 使用一个小的“hack”，基本上会在 640 像素处产生一个 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;
    }   
}