Question

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

作为一个新手，我不允许发布图片，但请参阅www.123rf.com，其中有一个很好的例子，我正在努力实现[他们左边有一个旋转木马，这将是我的col- 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并开始我的营销内容。不确定我是否需要“清除”除了启动另一个容器之外的任何东西＆gt;行＆gt; col-md-12似乎适用于上面旋转木马行之后的内容。

我不想要任何有效的解决方案 - 很想知道这样做的最好方法，所以我正在学习如何正确使用Bootstrap 3。谢谢！

Answer 1

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

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

如果你想创建一个像Bootstrap那样的布局，在我看来，你需要熟悉Bootstrap，这样你就可以修改网格装订线，并根据两个盒子的内容找出糟糕浏览器的后备内容在col-md-4里面。

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

如果您不希望列之间有30px的大间隙，则必须修改排水沟。在这种类型的布局中，为了使它具有响应性，我相信你需要一个脚本来使col-md-4高度等于col-md-8内的任何高度，然后使用百分比来计算出数学。您还可以确保滑块不会变小并始终保持在给定高度，并且您不需要脚本，只需将尺寸放在最小宽度的框中。在此示例中未计算出布局的移动版本。

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

Twitter Bootstrap中的网格/布局3

1 个答案: