Html 如何将引导行分成 5 个相等的部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29092600/
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
How to divide bootstrap row into 5 equal parts?
提问by anuruddhika
I want to divide bootstraprow into 5 equal parts. It includes 12-col-md, so how i can divide it into equal 5 parts?
我想将bootstrap行分成5 个相等的部分。它包括12-col-md，那么我如何将它分成相等的 5 部分？
Can anyone help me to solve this problem?
谁能帮我解决这个问题？
回答by Fernando Madriaga
A great way to resolve this is here!
解决这个问题的好方法就在这里！
By default Bootstrap does not provide grid system that allows us to create five columns layout, but as you can see it's quite simple. At first you need to create default column definition in the way that Bootstrap do it. I called my classes col-..-15.
默认情况下，Bootstrap 不提供允许我们创建五列布局的网格系统，但正如您所见，它非常简单。首先，您需要按照 Bootstrap 的方式创建默认列定义。我称我的班级为 col-..-15。
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
Next you need to define width of new classes in case of different media queries.
接下来，您需要在不同媒体查询的情况下定义新类的宽度。
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
Now you are ready to combine your classes with original Bootstrap classes. For example, if you would like to create div element which behave like five columns layout on medium screens and like four columns on smaller ones, you just need to use something like this:
现在您已准备好将您的类与原始 Bootstrap 类结合起来。例如，如果你想创建一个 div 元素，它在中等屏幕上表现得像五列布局，而在较小的屏幕上表现得像四列，你只需要使用这样的东西：
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
回答by Ravi Delixan
Old bootstrap Version
旧的引导程序版本
Use five divs with a class of span2 and give the first a class of offset1.
使用五个类为 span2 的 div，并为第一个类指定 offset1。
<div class="row-fluid">
<div class="span2 offset1"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
<div class="span2"></div>
</div>
Five equally spaced and centered columns.
五个等距且居中的列。
在引导程序 3.0 和 4 alpha 中。
<div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
CUSTOM STYLE定制风格
Custom Styles
自定义样式
.container {width:100%; float:left;}
.col1{ width:20%; float:left}
Latest Table style
最新表格样式
.container {width:100%;display:table;}
.col1{ width:20%; display:table-cell;}
回答by iurii
You can use something like
你可以使用类似的东西
<div class="container">
<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
</div>
the first container will have offset so you will have the same margin (col-sm-1) on the left and right side with 5 equal containers inside.
第一个容器将具有偏移量，因此左侧和右侧将具有相同的边距 (col-sm-1)，其中包含 5 个相等的容器。
回答by jit ahake
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-4 bg-danger">1</div>
<div class="col-md-4 bg-success">2</div>
<div class="col-md-4 bg-danger">3</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-6 bg-success">4</div>
<div class="col-md-6 bg-danger">5</div>
</div>
</div>
</div>
回答by Syed Shibli
it is quite simple if you are using bootstrap 4, not sure if it also works in bootstrap 3
如果您使用的是引导程序 4，这很简单，不确定它是否也适用于引导程序 3
<div class="container-fluid">
<h2>Bootstrap 4 Five Columns</h2>
<h5>Full-width (within .container-fluid)</h5>
<div class="row">
<div class="col">
<img src="//placehold.it/640x480" class="img-fluid">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
回答by Gajendra K S
I would suggest to use table instead of bootstrap for dividing it into 5 parts and inside each column again you can use bootstrap grid.
我建议使用 table 而不是 bootstrap 将其分为 5 个部分，并且在每列内再次您可以使用 bootstrap 网格。
This answer may help you this
这样的回答可以帮助你这个
But if you have any other issues that you can't go with the above way please comment below.
但是，如果您有任何其他问题无法采用上述方式，请在下面发表评论。
回答by amar agrawal
Use this css property in your custromScript.css file to use in large Device
在 custromScript.css 文件中使用此 css 属性以在大型设备中使用
.col-lg-2-0 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
and use class col-lg-2-0instead of col-lg-2which will divide four columns
并使用 classcol-lg-2-0而不是col-lg-2which 将划分四列
回答by Shibaji Chakraborty
You can use span2to utilize maximum amount of space.
Please find the code:
您可以使用span2以利用最大量的空间。请找到代码：
<div class="row-fluid">
<div class="span2">1</div>
<div class="span2">2</div>
<div class="span2">3</div>
<div class="span2">4</div>
<div class="span2">5</div>
</div>
