Html Twitter Bootstrap 中的 8 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20287867/
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
8 Columns in Twitter Bootstrap
提问by ConquestXD
How can I set up 8 equal columns in the latest version of Twitter bootstrap.
如何在最新版本的 Twitter 引导程序中设置 8 个相等的列。
I can create 4 equal columns by doing the following but don't get how I can get 8:
我可以通过执行以下操作创建 4 个相等的列，但不知道如何获得 8 个：
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 col-xs-6">
<a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
</div>
</div>
</div>
</div>
回答by Niran Manandhar
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
1
</div>
<div class="col-xs-3">
2
</div>
<div class="col-xs-3">
3
</div>
<div class="col-xs-3">
4
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
5
</div>
<div class="col-xs-3">
6
</div>
<div class="col-xs-3">
7
</div>
<div class="col-xs-3">
8
</div>
</div>
</div>
</div>
回答by Cory Dymond
I know that this is a pretty old topic, but it's the top search result for this problem, so I hope it's ok that I come through with an answer that I think is better than any of the current options provided here.
我知道这是一个相当古老的话题，但它是这个问题的最高搜索结果，所以我希望我能得到一个我认为比这里提供的任何当前选项都更好的答案。
In an n-column layout, I don't want to have to finagle some weird .row.col-stuff that doesn't allow me to resize when I move down in breakpoints.
在 n 列布局中，.row.col-当我在断点处向下移动时，我不想处理一些不允许我调整大小的奇怪东西。
For instance, the current accepted answer here correctly points out that you can't do this with default bootstrap, but the next answer in line suggests that you nest .col-xs-3's inside of .col-xs-6's and I assume a lot of people coming here are using that because it is the only workable answer you can find in the first page of a google search.
例如，此处当前接受的答案正确地指出您不能使用默认引导程序执行此操作，但是行中的下一个答案表明您嵌套在.col-xs-3's 内，.col-xs-6我假设很多来这里的人都在使用它因为这是您可以在谷歌搜索的第一页中找到的唯一可行的答案。
What if I want 8 columns on the lgbreakpoint and then 4 columns on tablets and 2 columns on mobile? That answer does not degrade gracefully. This method will, and it's incredibly easy to implement.
如果我想在lg断点上有 8 列，然后在平板电脑上有4 列，在移动设备上有 2 列怎么办？该答案不会优雅地降级。这种方法会，而且非常容易实现。
First, add this to your CSS file:
首先，将其添加到您的 CSS 文件中：
.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-8r {
width: 12.5%;
float: left;
}
@media (min-width: 768px) {
.col-sm-8r {
width: 12.5%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-8r {
width: 12.5%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-8r {
width: 12.5%;
float: left;
}
}
Next, add col-*-8rto your columns like so:
接下来，col-*-8r像这样添加到您的列中：
<div class="row">
<div class="col-xs-4 col-sm-3 col-md-8r">
...
</div>
</div>
Now, you have an 8 column layout that can work on all breakpoints.
现在，您有一个可以处理所有断点的 8 列布局。
The cool thing about this method is that if you need some odd number of columns, it's very easy to extend this out. You simply divide 100 by however many columns you need and then use that number in place of the 4 instances of width: 12.5%;in the code above (obviously, don't forget to update the class names to whatever number you are using).
这种方法很酷的一点是，如果您需要一些奇数列，很容易扩展它。您只需将 100 除以您需要的列数，然后使用该数字代替width: 12.5%;上面代码中的 4 个实例（显然，不要忘记将类名更新为您使用的任何数字）。
For instance, if you need a 7 column layout, you would use the absurdly long width: 14.28571428571429%in place of those 4 instances, change your class names to be .col-*-7rand then you can drop the class name in anywhere you want.
例如，如果您需要一个 7 列布局，您将使用荒谬的长width: 14.28571428571429%来代替这 4 个实例，将您的类名更改为.col-*-7r，然后您可以将类名放在任何您想要的地方。
回答by Thanushka
Add a style like this in to the bootstrap stylesheet, style.css:
将这样的样式添加到引导程序样式表 style.css 中：
.col-8{
width: 12.5%;
}
Then add it to your html.
然后将其添加到您的 html 中。
<div class="row">
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
</div>
回答by CJWEB
I had the same problem and went 4 columns, each containing 2 nested columns.
我遇到了同样的问题，去了 4 列，每列包含 2 个嵌套列。
回答by jer23jk
For 8 column grid you don't have to customize the css or html.
对于 8 列网格，您不必自定义 css 或 html。
Simply create or copy this:
只需创建或复制这个：
<div class="col-md-6">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
<div class="col-md-6">
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3">7</div>
<div class="col-md-3">8</div>
</div>回答by Pankaj Upadhyay
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Make</b></p>
<p class="marginTop20">Nissan</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Model</b></p>
<p class="marginTop20">Tiara-5</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Engine no</b></p>
<p class="marginTop20">102354</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Chassis no</b></p>
<p class="marginTop20">2114-14</p>
</div>
div>
</div>
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Mfg Year</b></p>
<p class="marginTop20">2016</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Seats</b></p>
<p class="marginTop20">5</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div class="premiumAtLifeRightBorder">
<p><b>Body Type</b></p>
<p class="marginTop20">Sedan</p>
</div>
</div>
<div class="col-xs-12 col-md-3 col-sm-3">
<div>
<p><b>CC</b></p>
<p class="marginTop20">3900</p>
</div>
</div>
</div>
</div>
</div>
回答by Gajendra K S
Best way to deal with this is to create table and divide the section with vwand then use bootstrap grid inside it.
处理此问题的最佳方法是创建表格并用其划分该部分，vw然后在其中使用引导网格。
My example is I wanted to divide layout into 63:37 ratio and again divide first part into 3 parts and second into two parts.
我的例子是我想把布局分成 63:37 的比例，然后再把第一部分分成 3 部分，第二部分分成两部分。
So I created table with two columns with width 63vwand 37vwthen use bootstrap grid inside it respectively.
所以，我创建的表有两列的宽度63vw和37vw然后分别用引导网格里面。
<div class="row">
<table id="main_table" style="width: 100%;height: 100%" cellspacing="0">
<tr style="width: 100%; position: relative">
<td id="donut1" style="width: 63vw;">
<div class="row">
<div class="col-sm-4">
Loading
</div>
<div class="col-sm-4">
Loading
</div>
<div class="col-sm-4">
Loading
</div>
</div>
</td>
<td id="donut1" style="width: 37vw;">
<div class="row">
<div class="col-sm-6">
Loading
</div>
<div class="col-sm-6">
Loading
</div>
</div>
</td>
</tr>
</table>
回答by Monzurul Haque
You can follow this steps to achieve 8 column in bootstrap.
您可以按照此步骤在 bootstrap 中实现 8 列。
<!-- 8 Column -->
<div class="8-column">
<!-- Container -->
<div class="container">
<!-- Parent row -->
<div class="row">
<!-- 1st parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /1st parent column -->
<!-- 2nd parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /2nd parent column -->
<!-- 3rd parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /3rd parent column -->
<!-- 4th parent column -->
<div class="col-md-3">
<!-- Child row -->
<div class="row">
<!-- 1st Child Column -->
<div class="col-md-6">
</div>
<!-- /1st Child Column -->
<!-- 2nd Child Column -->
<div class="col-md-6">
</div>
<!-- /2nd Child Column -->
</div>
<!-- Child row -->
</div>
<!-- /4th parent column -->
</div>
<!-- /Parent row -->
</div>
<!-- /Container -->
</div>
<!-- /8 Column -->
回答by Advocation
As BenM said above, Bootstrap uses a 12 column grid system, which won't divide cleanly into 8 equal columns.
正如 BenM 上面所说，Bootstrap 使用 12 列网格系统，它不会干净地分成 8 个相等的列。
If you absolutely require 8 columns, it might be worth checking out this, or even rolling your own.
