我正在尝试构建一个宽度为span8和不同高度的模块。有一个图像将定义div的高度,以及位于图像顶部的文本。我很难弄清楚当 Bootstrap 调整div 大小时如何防止我的部分图像被裁剪。
此外,我在弄清楚如何定位文本框时遇到了麻烦。我正在尝试有两个文本框 - 一个位于 0% 垂直,第二个位于 50% 垂直。
<div class="row">
<div class="span12 promo">
<div class="content">
<div class="row-fluid">
<div class="topText span24">
Text positioned on the top half
</div>
</div>
<div class="row-fluid">
<div class="botText span24">
Text positioned on the bottom half
</div>
</div>
</div>
</div>
</div>
.promo { height: 100%; }
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }
.promo .content .row-fluid { height: 50px; }
您是否尝试过设置 min-height
属性?这将设置最小高度,以便您的图像不会被截断。
我会尝试将两个div都设置为height:50%;
,这应该会给您正确的效果。