自定义网格系统

Question

我已创建此网格，您将在下面看到：

不使用bootstrap或其他网格系统。 现在我想使用bootstrap，但我不知道是否可以创建类似的东西，因为它没有保存盒子之间的相等空格，

例如：http://jsfiddle.net/xe6h7grs/

<div class="container">
    <div class="row">
        <div class="col-md-4">

            <div class="box">A</div>
        </div>

        <div class="col-md-4">

            <div class="box">B</div>
        </div>

        <div class="col-md-4">

            <div class="box">
                C
                <ul>
                    <li>example</li>
                    <li>example</li>
                    <li>example</li>
                    <li>example</li>
                    <li>example</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">

            <div class="box">HEY</div>
        </div>

        <div class="col-md-4">

            <div class="box">HEY</div>
        </div>

        <div class="col-md-4">

            <div class="box">HEY</div>
        </div>
    </div>

</div>

Answer 1

Bootstrap列具有左/右填充，这可能会导致不必要的间距。您可以根据需要覆盖此填充。

.col-xs-4 {
    padding: 0;
}

http://jsfiddle.net/xe6h7grs/1/

或者您可以将框类边距设置为负值以覆盖填充。

.box {
    margin: 1px -15px;
}

另请注意，对于响应性，默认列宽为100％，指定的大小会向上扩展。这意味着如果你只声明md，xs和sm将是100％。

Answer 2

1）一般来说，你不应随意改变网格本身。相反，您可以使用自定义类：

.no-gutter >[class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

这将允许您将列填充（以及与列相关的任何其他规则）调整为您需要的任何内容。

2）或者如果你使用SASS，你可以使用下面的Variable来调整填充。

// **列之间的填充。左右分为两半。

 $grid-gutter-width:         30px !default;

3）如果有意义，你也可以使用自定义构建。请参阅Customize Grid System。

请参阅代码段中的示例。

body,
html {
  padding-top: 20px;
}
.lightblue {
  background: lightblue;
}
.red {
  background: #f00;
}
.box {
  background: #ddd;
  padding: 20px;
}
.box2 {
  background: #f00;
  color: white;
  padding: 20px;
  margin: 1px;
}
.box3 {
  background: #444;
  padding: 20px;
  margin: 1px;
  color: white;
}
.no-gutter >[class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>Original Grid</h3>

  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box">A</div>
    </div>
    <div class="col-md-4">
      <div class="box">B</div>
    </div>
    <div class="col-md-4">
      <div class="box">C
        <ul>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box">HEY</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>Your example Grid</h3>

  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box2">A</div>
    </div>
    <div class="col-md-4">
      <div class="box2">B</div>
    </div>
    <div class="col-md-4">
      <div class="box2">C
        <ul>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row lightblue">
    <div class="col-md-4">
      <div class="box2">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box2">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box2">HEY</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>Columns with Zero Padding | Outcome</h3>

  <div class="row no-gutter red">
    <div class="col-md-4">
      <div class="box3">A</div>
    </div>
    <div class="col-md-4">
      <div class="box3">B</div>
    </div>
    <div class="col-md-4">
      <div class="box3">C
        <ul>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
          <li>example</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row no-gutter red">
    <div class="col-md-4">
      <div class="box3">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box3">HEY</div>
    </div>
    <div class="col-md-4">
      <div class="box3">HEY</div>
    </div>
  </div>
</div>