Bootstrap自定义网格列

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。

- Hamidreza

---

这是一个经常出现的问题，已经有多个答案在这里：https://dev59.com/7Gkv5IYBdhLWcg3wvDNF - Seb33300

@Seb33300 谢谢，我发现这个答案很有帮助：https://dev59.com/7Gkv5IYBdhLWcg3wvDNF#14496611 - Hamidreza

Answer 1

有一个部分解决方案可以在这里找到（添加偏移量）。

然而，如果你想做正确的事情，你需要创建新的类来覆盖Bootstrap默认的宽度。然后将此类添加到每个列中。

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

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

- Georgi Demirev

Answer 2

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

- Drew R

---

看起来是个很酷的解决方案，每次想要更新bootstrap时都要构建一个新的自定义包会很烦人。 - Kilian Perdomo Curbelo

Answer 3

在更新的Bootstrap中，您实际上不需要这样做。您可以下载自定义的Bootstrap 3版本，使用@grid-columns设置指定所需列的数量。

前往网址

http://getbootstrap.com/customize/

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

- Mustafa sabir

---

提问者说“只是针对一个元素”，而不是整个网站。 - bart

Answer 4

您可以创建自己的规则集，以Bootstrap的网格结构方式为参考：

.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

- rorofromfrance

---

谢谢，但我没有响应。 - Hamidreza

这取决于您想在每个 div 中执行什么操作，以及您希望在不同的断点处如何运作。一切都可以自定义。 - rorofromfrance

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>

- Juan J

Answer 6

默认的Bootstrap网格系统有12列。

如果您想定义自定义列，您需要根据您的需求进行自定义在此页面上。

- Cihad Turhan