如何将引导行划分为5个相等的部分？

Question

我想把bootstrap行分成5个相等的部分。它包括12列md，那么我如何将它分成相等的5部分呢？

有人能帮我解决这个问题吗？

Answer 1

你可以用像

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

旧的引导版本

使用五个div和一个span2类，并给第一个一个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>

五根等间距、居中的柱子。

<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

解决这个问题的一个好方法就是在这里！

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

现在，您已经准备好将您的类与原始引导类相结合。例如，如果您想创建div元素，其行为类似于中等屏幕上的五列布局和较小屏幕上的四列布局，则只需使用如下内容：

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