Twitter Bootstrap 3 中的网格/布局

Question

我是 Twitter Bootstrap 3 的新手，并且已经阅读了他们的文档并了解如何嵌套列，但我有一个不同的问题。我正在尝试创建一个 col-md-8 轮播 [我知道该怎么做] 和一个 col-md-4 在它旁边包含 2 行 [不确定我应该称它们为行]，总高度等于相同高度为轮播 [450px]。

作为新手，我不允许发布图片，但请查看 www.123rf.com，它有一个很好的例子来说明我正在努力实现的目标 [他们在左边有一个旋转木马，这将是我的颜色- md-8 然后右边的 3 个盒子 [我的只有 2 个]，它们将包含在我的 col-md-4 中，但我不知道获得这些盒子的最佳方法 [它们只是行吗？]。我只需要帮助在第二列中创建这些框。

我的代码：

<div class="container">
<div class="row">
<div class="col-md-8">  
<div id="myCarousel" class="carousel slide" data-ride="carousel">
A bunch of code here for carousel which WORKS beautifully, so no help needed here!

</div> <!--End carousel col-md-8 --> 

Now the part I'm confused on. Should I use panels or maybe even list groups? Not sure that's the best way to do this...OR should I do the following and then just adjust heights in CSS?:
<div class="col-md-4">
<div class="row">
<div class="col-md-12">Top Box</div>
<div class="col-md-12">Bottom Box</div> 
</div> 
</div> <!--End col-md-4 div--> 

然后我将关闭上一行的所有 div 并开始我的营销内容。不确定我是否需要“清除”任何东西，但启动另一个容器 > 行 > col-md-12 似乎适用于上述轮播行之后的内容。

我不想要任何可行的解决方案 - 很想知道执行此操作的最佳方法，因此我正在学习正确使用 Bootstrap 3。谢谢！

Answer 1

这不是未经修改的 Bootstrap CSS（任何版本）的布局。

该示例 (rf123) 是一个无响应站点，其中滑块的高度是已知的。因此，您不必弄清楚如何处理不同宽度的布局。右侧三行内的图像是该高度的 1/3 减去两个分隔线。

如果您想使用 Bootstrap 创建类似的布局，我认为您需要熟悉 Bootstrap，以便您可以修改网格排水沟，并根据两个框的情况找出蹩脚浏览器的后备方案在 col-md-4 内。

http://jsbin.com/OCiPofu/2/

如果您不希望列之间有 30 像素的大间隙，则必须修改装订线。在这种类型的布局中使其具有响应性，我相信您需要一个脚本来使 col-md-4 高度等于 col-md-8 内部的高度，然后使用百分比来计算数学.您也可以确保滑块不会变小并且始终保持在给定的高度，并且您不需要脚本，只需将大小放在最小宽度中的框上即可。此示例中未计算出移动版布局。

有时对于基于非响应式示例的设计理念，您需要处理大量的媒体查询，最好通过查看响应式设计的网站并从中学习来找出实现相同目标的方法。