5

使用流体网格布局，我可以获得 4 个相等的跨度：

<div class="row-fluid">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

或者我可以得到 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>

但是我如何获得 5 个相等的跨度？

4

7 回答 7

14

我遵循了计算宽度的引导方法，并提出了以下建议。您将需要遵循以下 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>

然后，在您加载 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; 
    }
 }

查看下面的演示以了解它是如何工作的。

演示

于 2013-04-16T22:03:16.717 回答
3

考虑到默认情况下 bootstrap 是 12 列，你不能在数学上得到 5 个相等的跨度。

但是，如果您真的需要（坏主意，稍后再介绍），您可以自定义引导下载以具有 15 列。

http://twitter.github.com/bootstrap/customize.html

将变量更改@gridColumns为 15，然后使用 5 列全部带有span3.

不过这是个坏主意。Bootstrap 是 12 列，因为 12 列效果很好。使用 12 可以支持 1/4、1/3 和 1/2 宽度的列。使用 15 列布局，您将只支持 1/3 宽度（以及许多奇怪的其他尺寸）。不过，您的电话，设置就在那里。

于 2013-02-27T04:15:23.417 回答
1

您需要生成自定义网格（例如 10）。无法在 12 列网格中创建 5 个相等的原始数据

于 2013-02-27T04:16:31.943 回答
1

或者您可以将其添加到您的 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;
    }
}

然后就像使用任何其他引导类一样使用它。

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
于 2015-08-12T17:17:49.570 回答
0

嗯，这很数学。不是真正的 CSS/Bootstrap 问题...

您将无法在一行中创建 5 个相等的跨度，因为 Bootstrap 的默认网格列是 12，并且12 / 5 = 2.4.

于 2013-02-27T04:12:55.027 回答
0

我会通过创建一个 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 -->
于 2013-02-27T05:22:37.710 回答
0 
.span3 {   width: 220px; }
.span2 {   width: 140px; }

或者

.row-fluid .span3 {   width: 23.404255319148934%;   *width:
23.351063829787233%; }

.row-fluid .span2 {   width: 14.893617021276595%;   *width:
14.840425531914894%; }

这些仅提供元素的宽度，您应该可以简单地添加

class="span" style="width:180px"

或者

class="span" style="width:19.1488%"

您需要添加类跨度 cos bootstrap 需要那些.row工作。

于 2013-07-26T11:38:09.793 回答