我正在尝试在具有以下 fiddle 格式的 Bootstrap 中格式化幻灯片:fiddle
两个“隐藏”的 div 在桌面上时会消失,这样当有人使用平板电脑或手机时,它们会相互堆叠。这在高度设置为固定数字的 fiddle 中工作正常
height: 100px;
但我不想这样设置高度。如果我删除此行,您可以在 fiddle 中看到“hidden2”以一种奇怪的方式下降,而不是充当底部文本内容的间隔符。我还注意到,如果我删除 img 标签,网格工作正常。
我不确定它为什么这样做,对于真实内容,它看起来就像没有间隔符,所有文本都紧贴左侧。有什么想法吗?
最佳答案
已编辑:您可以设置内容的宽度,以便两边都有空间,并使用 Bootstrap 网格系统将文本内容放下。
HTML
<div class="whole">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="http://placehold.it/100x100"/>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">text content</div>
</div>>
CSS
div {
height: 100px;
background: red;
border: 1px solid black;
text-align: center;
}
img {
border-radius: 50%;
}
.whole {
margin: 0 10%;
width: 80%;
}
关于css - Bootstrap 网格格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32060131/