如何将bootstrap行分成5个相等的部分？

Question

我想将bootstrap行分成5个相等的部分.它包括12-col-md,所以我如何将它分成相等的5个部分？

任何人都可以帮我解决这个问题吗？

Answer 1

解决这个问题的好方法就在这里!

默认情况下,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;
}

接下来,您需要在不同媒体查询的情况下定义新类的宽度.

.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;
    }
}

现在,您已准备好将类与原始Bootstrap类组合在一起.例如,如果你想创建div元素,它在中等屏幕上表现得像五列布局,而在较小的列上就像四列一样,你只需要使用这样的东西:

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Answer 2

旧引导版本

使用一个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>

五个等间距和中心的列.

在bootstrap 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>

定制风格

自定义样式

.container {width:100%; float:left;}
.col1{ width:20%; float:left}

最新表风格

.container {width:100%;display:table;}
.col1{ width:20%; display:table-cell;}

Answer 3

你可以使用类似的东西

<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>

第一个容器将具有偏移量,因此左侧和右侧将具有相同的边距(col-sm-1),内部有5个相等的容器.

Answer 4

如果您使用 bootstrap 4，这很简单，不确定它是否也适用于 bootstrap 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>

Answer 5

您可以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>