Question

如何为div的一个元素制作自定义网格列？我需要每行5列（每行20％）。

示例：

<div id="parent">
    <div class="row">
        <div class="col-md-9">...</div>
        <div class="col-md-3">...</div>
    </div>
    <div class="row">
        <div class="col-md-2">...</div> <!-- 1 -->
        <div class="col-md-2">...</div> <!-- 2 -->
        <div class="col-md-2">...</div> <!-- 3 -->
        <div class="col-md-2">...</div> <!-- 4 -->
        <div class="col-md-2">...</div> <!-- 5 -->
    </div>
</div>

我使用的是Bootstrap 3.1.1

Answer 1

部分解决方案是here（添加偏移量）。

但是，如果您想要正确执行，则必须创建新类以使用适当的宽度覆盖Bootstrap的默认值。然后将此类添加到每个列。

.5-col-grid {
    width: 20%;
}

此外，如果您希望在较小的屏幕分辨率下获得100％的宽度，则可以设置CSS @media支持。

Answer 2

我使用LESS构建了一个解决方案，不需要修改Bootstrap。 https://github.com/drew-r/bootstrap-n-column

Answer 3

你真的没有，在更新的Bootstrap中。您可以下载自定义Bootstrap 3版本，使用@ grid-columns设置指定所需列的数量。

转到网址

http://getbootstrap.com/customize/

向下滚动到“网格系统”并为您想要的自定义网格系统输入您自己的值。

Answer 4

您可以创建自己的规则集，采用Boostrap的方式构建其网格作为参考：

.col-custom-five {
    position: relative;
    float: left;
    width: 20%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

通常五列不适合在非常小的设备上使用。所以我通常做的是添加一个共同的xs声明。类似的东西：

<div class="row">
    <div class="col-custom-five col-xs-6">...</div> <!-- 1 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 2 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 3 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 4 -->
    <div class="col-custom-five col-xs-6">...</div> <!-- 5 -->
</div>

编辑：

您也可以直接从Bootstrap的网站生成所有自定义规则：http://getbootstrap.com/customize/#grid-system

Answer 5

如果要创建自己的列，则需要给div一个类，然后设置其样式。

您需要指定自定义宽度，然后确保将其浮动到左侧并添加填充。

例如：

.custom-col {

  width:20%;
  float:left;
  padding-left:15px;
  padding-right:15px;

}

<div class="custom-columns>
  <div class="container>
    <div class="row">
      <div class="custom-col">
        <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
      <div class="custom-col">
      <p>Sample text</p>
      </div>
    </div>
  </div>
</div>

Answer 6

默认引导网格系统附带12列。

如果要定义自定义的一个，则需要自定义您想要的on this page

Bootstrap自定义网格列

6 个答案: