css - Bootstrap 网格格式

Question

我正在尝试在具有以下 fiddle 格式的 Bootstrap 中格式化幻灯片:fiddle

两个“隐藏”的 div 在桌面上时会消失，这样当有人使用平板电脑或手机时，它们会相互堆叠。这在高度设置为固定数字的 fiddle 中工作正常

height: 100px;

但我不想这样设置高度。如果我删除此行，您可以在 fiddle 中看到“hidden2”以一种奇怪的方式下降，而不是充当底部文本内容的间隔符。我还注意到，如果我删除 img 标签，网格工作正常。

我不确定它为什么这样做，对于真实内容，它看起来就像没有间隔符，所有文本都紧贴左侧。有什么想法吗？

Answer 1

已编辑:您可以设置内容的宽度，以便两边都有空间，并使用 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%;
}