我正在寻找Bootstrap 3的模板/片段,这将创建一个具有以下特征的3项菜单:
桌面(1200px+) - 3列,居中。
平板电脑(~700px) - 3横列,图片左对齐,文字居中对齐。
移动版(<400px) -与平板电脑相同,但堆叠在一起。
我可以用单独的媒体查询来做,并为每个布局设计出特定的样式…但想节省一些时间& &;未来的恶化(在框架中手工操作越少越好)。
这是我的截图,以及我想要的ps模型(不能内联发布图像,不够声誉)。
当前:http://imgur.com/ETObiPv
希望:http://imgur.com/gC7xb4K
我想这对你有用。
这个布局的主要内容是:
- 使用绝对定位使文本容器的高度为图像的100%;
- 使用
display: table-cell
完成纵向对齐文本; - 使用一个小"hack",基本上在640px处产生一个xs断点。
<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;
}
}