Question

我正在尝试在具有以下小提琴格式的引导程序中格式化幻灯片：fiddle

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

height: 100px;

但我不想这样设定高度。如果我删除这一行你可以在小提琴中看到“hidden2”以一种奇怪的方式掉落而不是作为底部文本内容的间隔符。我也注意到如果我删除img标签，网格工作正常。

我不确定为什么会这样做而且真实的内容看起来就像没有间隔符而所有的文字都在左边。有什么想法吗？

Answer 1

已编辑：您可以拥有内容的宽度，以便两侧都有空间，并使用引导网格系统将文本内容放下。

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%;
}

Answer 2

正如我从你的问题中所理解的那样，你试图保留你提供的小提琴链接上的功能，但也保持相同的高度。我也明白你不想手动分配高度（即在你的情况下，硬编码）。

有两种方法可以解决方案：Javascript或CSS3。

<强>使用Javascript：

我通常不会使用Javascript解决布局问题，但由于您的方案已经超过一行，因此简单的方法是使用JavaScript。在jQuery的帮助下，您可以遍历 div 元素，具有初始化变量（例如：var bHeight = 0）。检查每个元素的高度;如果它更大，请将其分配给 bHeight 。

您的代码应该是这样的：

$(document).ready(function(){
    var bHeight = 0;
    $("div").each(function(){
        if($(this).height() > bHeight)
            bHeight = $(this).height();
    }); //end of loop

    //now, assign height to all
    $("div").height(bHeight);
});

此方法允许您动态分配列的高度。

<强> CSS3：

一点点在线研究向您介绍CSS3 display：flex ，但完全取决于您决定浏览器支持（CSS flex Property），以及解决问题的更多细节在这里：（A Complete Guide to Flexbox）

Bootstrap网格格式化

2 个答案: