twitter-bootstrap Bootstrap 自定义网格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23884290/
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
Bootstrap custom grid-columns
提问by Hamidreza
How i can make custom grid-columns just for one element of div?
I need to 5 column per row (20% width for each one).
我如何才能为 的一个元素制作自定义网格列div？我需要每行 5 列（每行 20% 的宽度）。
Example:
例子：
<div id="parent">
<div class="row">
<div class="col-md-9">...</div>
<div class="col-md-3">...</div>
</div>
<div class="row">
<div class="col-md-2">...</div> <!-- 1 -->
<div class="col-md-2">...</div> <!-- 2 -->
<div class="col-md-2">...</div> <!-- 3 -->
<div class="col-md-2">...</div> <!-- 4 -->
<div class="col-md-2">...</div> <!-- 5 -->
</div>
</div>
I'm using Bootstrap 3.1.1
我正在使用 Bootstrap 3.1.1
采纳答案by Georgi Demirev
A partial solution would be the one described here(adding an offset).
部分解决方案将是此处描述的解决方案（添加偏移量）。
However if you want to do it right, you'll have to create new classes to override Bootstrap's defaults with the appropriate width. Then add this class to each column.
但是，如果您想正确地进行操作，则必须创建新类以使用适当的宽度覆盖 Bootstrap 的默认值。然后将此类添加到每一列。
.5-col-grid {
width: 20%;
}
Additionally you can set CSS @media support if you want 100% width at smaller screen resolutions.
此外，如果您希望在较小的屏幕分辨率下 100% 宽度，您可以设置 CSS @media 支持。
回答by Drew R
I built out a solution to this using LESS that doesn't require modification of Bootstrap. https://github.com/drew-r/bootstrap-n-column
我使用 LESS 构建了一个解决方案，不需要修改 Bootstrap。https://github.com/drew-r/bootstrap-n-column
回答by Mustafa sabir
You actually dont have to, in the updated Bootstrap. You can download a custom Bootstrap 3 build, specifying the number of desired columns with the @grid-columns setting.
在更新的 Bootstrap 中，您实际上不必这样做。您可以下载自定义 Bootstrap 3 构建，使用 @grid-columns 设置指定所需的列数。
Go to url
转到网址
http://getbootstrap.com/customize/
scroll down to "Grid system" and enter your own values for the custom grid system you desire.
向下滚动到“网格系统”并为您想要的自定义网格系统输入您自己的值。
回答by Juan J
If you want to create your own column then you need to give the div a class and then style it.
如果你想创建你自己的列，那么你需要给 div 一个类，然后设置它的样式。
You need to specify the custom width and then make sure you float it to the left and add padding.
您需要指定自定义宽度，然后确保将其浮动到左侧并添加填充。
For example:
例如：
.custom-col {
width:20%;
float:left;
padding-left:15px;
padding-right:15px;
}<div class="custom-columns>
<div class="container>
<div class="row">
<div class="custom-col">
<p>Sample text</p>
</div>
<div class="custom-col">
<p>Sample text</p>
</div>
<div class="custom-col">
<p>Sample text</p>
</div>
<div class="custom-col">
<p>Sample text</p>
</div>
<div class="custom-col">
<p>Sample text</p>
</div>
</div>
</div>
</div>回答by rorofromfrance
You can create your own set of rule, taking Boostrap's way of structuring its grid as reference:
您可以创建自己的规则集，以 Boostrap 构建网格的方式为参考：
.col-custom-five {
position: relative;
float: left;
width: 20%;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
Usually five columns don't work well on really small device. So what I usually do is add a common xsdeclaration along with it. Something like:
通常五列在非常小的设备上不能很好地工作。所以我通常做的是添加一个共同的xs声明。就像是：
<div class="row">
<div class="col-custom-five col-xs-6">...</div> <!-- 1 -->
<div class="col-custom-five col-xs-6">...</div> <!-- 2 -->
<div class="col-custom-five col-xs-6">...</div> <!-- 3 -->
<div class="col-custom-five col-xs-6">...</div> <!-- 4 -->
<div class="col-custom-five col-xs-6">...</div> <!-- 5 -->
</div>
EDIT:
编辑：
You can also generate all the custom rules directly from Bootstrap's website as well: http://getbootstrap.com/customize/#grid-system
您也可以直接从 Bootstrap 的网站生成所有自定义规则：http: //getbootstrap.com/customize/#grid-system
回答by Cihad Turhan
Default bootstrap grid system comes with 12 columns.
默认引导网格系统带有 12 列。
If you want to define a custom one, you need to customize however you want on this page
如果你想定义一个自定义的，你需要在这个页面上自定义任何你想要的
