twitter-bootstrap 在引导程序中划分列的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33228559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best approach to divide column in bootstrap
提问by scott
I have divided my grid system following way.
我按照以下方式划分了我的网格系统。
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
</div>
My problem is I can't set 3 images in that div because of less width. Can any one tell how I can make it work. If I am doing any think wrong in my grid system please guide me.
我的问题是由于宽度较小，我无法在该 div 中设置 3 个图像。任何人都可以告诉我如何使它工作。如果我在我的网格系统中做错了什么，请指导我。
Thank you
谢谢
回答by Mallikarjun
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
Hope This will work..
希望这会奏效..
回答by Mukul Kant
You can use with to adding a custom class
您可以使用 with 添加自定义类
.thumb_img .img-thumbnail{
width:32%;
padding:4px;
margin-right:1%;
float:left;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6 thumb_img">
<div class="row">
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
</div>
</div>
回答by Luke
Not a 100% sure about your question but..
对您的问题不是 100% 肯定，但是..
1) you can only nest col-'s in row's. i.e:
1）你只能窝col-的在row“SIE：
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
2) each time you've divided a row in multiple columns, then inside the nested row you have 12 columns available again. i.e:
2) 每次您将一行分成多列时，在嵌套行内，您再次有 12 列可用。IE：
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
Or you can create 3 columns inside a row:
或者您可以在一行中创建 3 列：
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
I.e. 4 * 3 = 12 columns.
即 4 * 3 = 12 列。
