Html Bootstrap - 5 列布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31944691/
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 - 5 column layout
提问by Vodokan
I'm trying to get 5 column full width layout but I can't find the solution that fits on my needs
我正在尝试获得 5 列全宽布局，但找不到适合我需求的解决方案
Here's the code I use
这是我使用的代码
<!-- Content Section -->
<div class="container">
<div class="row">
<div class="col-lg-12" style="border: 1px solid red">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
<div class="col-xs-2" id="p2">Two</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-2" id="p4">Four</div>
<div class="col-xs-2" id="p5">Five</div>
</div>
<!-- //col-lg-12 -->
</div>
<!-- //row -->
lorem
</div>
</div>
<!-- //col-lg-12 -->
</div>
<!-- //row -->
</div>
<!-- //container -->
As a result I get 
结果我得到
And here is what I'm trying to achieve. Full width 5 column layout with a space between each column
这就是我想要实现的目标。全宽 5 列布局，每列之间有一个空格
回答by VannTile Ianito
.col-xs-2{
background:#00f;
color:#FFF;
}
.col-half-offset{
margin-left:4.166666667%
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="border: 1px solid red">
<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-2 col-half-offset" id="p2">Two</div>
<div class="col-xs-2 col-half-offset" id="p3">Three</div>
<div class="col-xs-2 col-half-offset" id="p4">Four</div>
<div class="col-xs-2 col-half-offset" id="p5">Five</div>
<div>lorem</div>
</div>
</div>This should be ok.
这应该没问题。
回答by Zim
5 Columns with Bootstrap 4
使用 Bootstrap 4 的 5 列
Here is 5 equal, full-width columns (no extra CSS or SASS) using the auto-layout grid..
这是使用自动布局网格的5 个相等的全宽列（没有额外的 CSS 或 SASS）。
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
</div>
http://codeply.com/go/MJTglTsq9h
http://codeply.com/go/MJTglTsq9h
This solution works because Bootstrap 4 is now flexbox. You can get the 5 colums to wrap within the same .rowusing a clearfix break such as <div class="col-12"></div>or <div class="w-100"></div>very 5 columns.
此解决方案有效，因为 Bootstrap 4 现在是 flexbox。你可以得到5个colums到在同一个包装.row使用clearfix休息，如<div class="col-12"></div>或<div class="w-100"></div>非常5列。
回答by Rafael Prato
Just add this to your CSS
只需将此添加到您的 CSS
/* 5 Columns */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.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;
}
}
回答by Myke Black
Sometimes I'm asked to use some pretty odd grid layouts in existing bootstrap websites (without messing up the current code). What I have done is create a separate CSS file which i can just drop into current bootstrap projects and use the grid layout styles in there. Here is what the bootstrap-5ths.css file contains along with an example of how it looks for bootstrap version 4.
有时我会被要求在现有的引导程序网站中使用一些非常奇怪的网格布局（不要弄乱当前的代码）。我所做的是创建一个单独的 CSS 文件，我可以将其放入当前的引导项目并使用其中的网格布局样式。下面是 bootstrap-5ths.css 文件包含的内容以及它如何查找 bootstrap 版本 4 的示例。
If you want to use this with bootstrap version 3, just remove the col-xl-* styles and change the min-widths from 576px to 768px, 768px to 992px and 992px to 1200px.
如果您想在 bootstrap 版本 3 中使用它，只需删除 col-xl-* 样式并将最小宽度从 576px 更改为 768px，将 768px 更改为 992px，将 992px 更改为 1200px。
.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xl-5ths,
.col-xs-two5ths, .col-sm-two5ths, .col-md-two5ths, .col-lg-two5ths, .col-xl-two5ths,
.col-xs-three5ths, .col-sm-three5ths, .col-md-three5ths, .col-lg-three5ths, .col-xl-three5ths,
.col-xs-four5ths, .col-sm-four5ths, .col-md-four5ths, .col-lg-four5ths, .col-xl-four5ths,
.col-xs-five5ths, .col-sm-five5ths, .col-md-five5ths, .col-lg-five5ths, .col-xl-five5ths,
{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 576px) {
.col-sm-5ths {width: 20%;float: left;}
.col-sm-two5ths {width: 40%;float: left;}
.col-sm-three5ths {width: 60%;float: left;}
.col-sm-four5ths {width: 80%;float: left;}
}
@media (min-width: 768px) {
.col-md-5ths {width: 20%;float: left;}
.col-md-two5ths {width: 40%;float: left;}
.col-md-three5ths {width: 60%;float: left;}
.col-md-four5ths {width: 80%;float: left;}
}
@media (min-width: 992px) {
.col-lg-5ths {width: 20%;float: left;}
.col-lg-two5ths {width: 40%;float: left;}
.col-lg-three5ths {width: 60%;float: left;}
.col-lg-four5ths {width: 80%;float: left;}
}
@media (min-width: 1200px) {
.col-xl-5ths {width: 20%;float: left;}
.col-xl-two5ths {width: 40%;float: left;}
.col-xl-three5ths {width: 60%;float: left;}
.col-xl-four5ths {width: 80%;float: left;}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
<div class="col-md-5ths">1</div>
</div>
<div class="row">
<div class="col-md-5ths">1</div>
<div class="col-md-two5ths">2</div>
<div class="col-md-two5ths">2</div>
</div>
<div class="row">
<div class="col-md-three5ths">3</div>
<div class="col-md-two5ths">2</div>
</div>
<div class="row">
<div class="col-md-four5ths">4</div>
<div class="col-md-5ths">1</div>
</div>
<div class="row">
<div class="col-md-five5ths">5</div>
</div>
</div>回答by Luay Abdulraheem
If you want to enforce the 20% column width for every row that you have, even if you don't have 5 columns in some rows, you will have to add the following to your css or scss file:
如果您想为您拥有的每一行强制使用 20% 的列宽，即使某些行中没有 5 列，您也必须将以下内容添加到您的 css 或 scss 文件中：
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
@media (min-width: 768px) {
.col-sm-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 992px) {
.col-md-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 1200px) {
.col-lg-5-cols {
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
And in your html, use the added class as following:
在您的 html 中，使用添加的类，如下所示：
<div class="row">
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
<div class="col-lg-5-cols"></div>
</div>
回答by user2105483
That's better, you can use any div count.
更好，您可以使用任何 div 计数。
.col-xs-2{
background:#00f;
color:#FFF;
}
.col_item {
margin-left:4.166666667%
}
.col_item:first-child,
.col_item:nth-child(5n+1) {
margin-left: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="border: 1px solid red">
<div class="col-xs-2 col_item" id="p1">One</div>
<div class="col-xs-2 col_item" id="p2">Two</div>
<div class="col-xs-2 col_item" id="p3">Three</div>
<div class="col-xs-2 col_item" id="p4">Four</div>
<div class="col-xs-2 col_item" id="p5">Five</div>
<div class="col-xs-2 col_item" id="p5">One</div>
</div>
</div>回答by Derek W.
Why not using grid?
为什么不使用网格？
.container {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-column-gap: 20px
}
回答by Pankaj Upadhyay
CSS
CSS
.bg{
background-color: #9DC3E6;
border-radius: 10px;
color: #fff;
padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5-cols {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5-cols {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5-cols {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5-cols {
width: 20%;
float: left;
}
}
html
html
<div className="row">
<div className="col-md-5-cols">1<div className="bg"></div></div>
<div className="col-md-5-cols">2<div className="bg"></div></div>
<div className="col-md-5-cols">3<div className="bg"></div></div>
<div className="col-md-5-cols">4<div className="bg"></div></div>
<div className="col-md-5-cols">5<div className="bg"></div></div>
</div>
回答by Chris Dobson
Take a look at this page for general Boostrap layout information http://getbootstrap.com/css/#grid-offsetting
看看这个页面的一般 Boostrap 布局信息http://getbootstrap.com/css/#grid-offsetting
Try this:
尝试这个：
<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-3">
<div class="col-xs-8 col-xs-offset-2" id="p2">Two</div>
</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-3">
<div class="col-xs-8 col-xs-offset-2" id="p4">Four</div>
</div>
<div class="col-xs-2" id="p5">Five</div>
I've split the width into 5 uneven divwith col-xs- 2,3,2,3,2respectively. The two divwith col-xs-3are 1.5x the size of the col-xs-2 div, so the column width needs to be 2/3x (1.5 x 2/3 = 1) the col-xs-3widths to match the rest.
我已经分裂宽度为5个不均匀的div与col-xs- 2,3,2,3,2分别。两个div同col-xs-3是1.5倍的大小col-xs-2 div，因此需要宽度的柱为2/3×（ 1.5 x 2/3 = 1）的col-xs-3到其他部分不符宽度。
回答by arodriguezdonaire
Put some margin-leftin all green divsbut not in the first
把一些margin-left放在全绿色divs但不是第一个
