Html 1 行 5 个相等的跨度 - Twitter Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15104049/
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
5 Equal Spans in 1 Row - Twitter Bootstrap
提问by colmtuite
Using the fluid grid layout I can get 4 equal spans:
使用流体网格布局，我可以获得 4 个相等的跨度：
<div class="row-fluid">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
Or I can get 6 equal spans:
或者我可以得到 6 个相等的跨度：
<div class="row-fluid">
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
</div>
But how do I get 5 equal spans?
但是我如何获得 5 个相等的跨度？
采纳答案by Mike Robinson
Considering that by default bootstrap is 12 columns, you cannot mathematically get 5 equal spans.
考虑到默认情况下引导程序是 12 列，您无法在数学上获得 5 个相等的跨度。
However, if you really need to (bad idea, more on that in a second), you can customize your bootstrap download to have 15 columns.
但是，如果您确实需要（坏主意，稍后会详细介绍），您可以自定义引导程序下载以包含 15 列。
http://twitter.github.com/bootstrap/customize.html
http://twitter.github.com/bootstrap/customize.html
Change the @gridColumnsvariable to 15, then use 5 columns all with a span3.
将@gridColumns变量更改为 15，然后使用 5 列，所有列都带有span3.
It is a bad idea though. Bootstrap is 12 columns because 12 works well. Using 12 gives you support for 1/4, 1/3, and 1/2 width columns. With a 15 column layout, you will only have support for 1/3rd width (and a lot of strange other sizes). Your call though, the setting is there.
不过这是个坏主意。Bootstrap 是 12 列，因为 12 行效果很好。使用 12 可以支持 1/4、1/3 和 1/2 宽度的列。使用 15 列布局，您将只支持 1/3 宽度（以及许多奇怪的其他尺寸）。你的电话，设置就在那里。
回答by Paul Gemignani
I have followed bootstraps methods for calculating widths and have come up with the following. You will want to follow the HTML structure of as follows:
我遵循引导程序方法来计算宽度并提出以下方法。您将需要遵循以下 HTML 结构：
<div class="row-fluid-5">
<div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
<div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
<div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
<div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
<div class="span2">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
Then, after you load bootstrap.css and bootstrap-responsive.css, load your custom.css file with the following:
然后，在加载 bootstrap.css 和 bootstrap-responsive.css 后，使用以下内容加载 custom.css 文件：
/* CUSTOM 5 COLUMN SPAN LAYOUT
*
* based on http://gridcalculator.dk/
* width => 1200, gutter => 15px, margin => 15px, columns => 5
*/
.row-fluid-5 {
width: 100%;
*zoom: 1;
}
.row-fluid-5:before,
.row-fluid-5:after {
display: table;
line-height: 0;
content: "";
}
.row-fluid-5:after {
clear: both;
}
.row-fluid-5 [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 30px;
margin-left: 1.875%;
*margin-left: 1.875%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid-5 .controls-row [class*="span"] + [class*="span"] {
margin-left: 1.875%;
}
.row-fluid-5 [class*="span"]:first-child{
margin-left: 0;
}
.row-fluid-5 .span2 {
width: 18.5%;
*width: 18.5%;
}
/* responsive ONLY */
@media (max-width: 600px){ /* spans reduce to 100px then go full width */
.row-fluid-5 [class*="span"]{
margin-left: 0;
float: left;
width: 100%;
padding: 10px;
}
}
Check out the demo below to see how it works.
查看下面的演示，看看它是如何工作的。
回答by Daniil Ryzhkov
回答by hardba11
Or you could add this to your css (or the bootstrap.css) - This is my preferred way to solve this. The "15" used to throw me a little bit, but just try to remind yourself it's 1/5th.
或者您可以将其添加到您的 css（或 bootstrap.css）中 - 这是我解决此问题的首选方法。“15”曾经让我有点失望，但请提醒自己这是 1/5。
.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;
}
}
Then just use it like you would any other bootstrap class.
然后就像使用任何其他引导类一样使用它。
<div class="row">
<div class="col-md-15 col-sm-3">
...
</div>
</div>
回答by DorienCragen
.span3 { width: 220px; }
.span2 { width: 140px; }
or
或者
.row-fluid .span3 { width: 23.404255319148934%; *width:
23.351063829787233%; }
.row-fluid .span2 { width: 14.893617021276595%; *width:
14.840425531914894%; }
Those are only provided width of element, you should be able to simply add
这些仅提供元素的宽度，您应该可以简单地添加
class="span" style="width:180px"
or
或者
class="span" style="width:19.1488%"
You need to add class span cos bootstrap need those for .rowworks.
您需要添加类 span cos bootstrap 需要那些才能.row工作。
回答by uchamp
I would have converted this into a 10/2 = 5 problem by creating a fluid row of span10 and then having child fluid rows with span2 children. The following works:
我会通过创建一个 span10 的流体行然后让子流体行与 span2 子级将其转换为 10/2 = 5 问题。以下工作：
<div class="container-fluid">
<div class="row-fluid span10">
<div class="row-fluid">
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
</div>
</div>
<div class="row-fluid span10">
<div class="row-fluid">
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
<div class="span2">...</div>
</div>
</div>
</div> <!-- /container -->
回答by gustavohenke
Well, that is mathematic. Not a real CSS/Bootstrap problem...
嗯，那是数学。不是真正的 CSS/Bootstrap 问题...
You'll not be able to create 5 equal spans within a row because the default grid columns of Bootstrap is 12, and 12 / 5 = 2.4.
您将无法在一行中创建 5 个相等的跨度，因为 Bootstrap 的默认网格列是 12，并且12 / 5 = 2.4.
回答by RussellB
Why not just use tables. This is what I use and its responsive
为什么不直接使用表格。这是我使用的和它的响应
<div class="row-fluid">
<div class="span12">
<table class="table">
<tbody>
<tr>
<td width="20%">1</td>
<td width="20%">2</td>
<td width="20%">3</td>
<td width="20%">4</td>
<td width="20%">5</td>
</tr>
</tbody>
</table>
</div>
</div>
