无法在同一行中获取所有列

Question

我正在使用 Bootstrap 并尝试使用 bootstrap 12 列样式将 3 个 div 块居中。所以每个 div 占用 4 列。我希望这些列之间有一些间距，因此我在右侧添加了 10px 边距。这会将第三个 div 向下推到下一行。如何获得间距并仍将所有 3 列保持在同一行？

HTML

<div class="container">
    <div class="form-group col-sm-4 col-lg-4 cust_box">
        <h3>Something</h3>
    </div>

    <div class="form-group col-sm-4 col-lg-4 cust_box">
        <h3>Something</h3>
    </div>

    <div class="form-group col-sm-4 col-lg-4 cust_box">
        <h3>Something</h3>
    </div>
</div>

CSS

.cust_box{
    margin-top: 15px;
    margin-bottom:15px;
    padding-left: 10px;
    padding-right:10px;
    background-color: #1A284B;
    color: #fff;
    height: 290px;
    max-width:100%;
    border: 1px solid #162444;
    margin-right: 10px; /*Line that causes issue*/
}

问题在CodePen 中重现

Answer 1

将您的班级cust_box 放在列内。 h3 有边距，因此也可能会干扰您的布局。您可能还想只使用row 类而不是form-group。

请参阅工作示例片段。 （添加颜色以便您了解实际发生的情况）

.cust_box {
  margin: 15px 2.5px;
  padding: 25px;
  height: 290px;
  max-width: 100%;
  background-color: #1A284B;
  color: #fff;
  border: 1px solid #162444;
}
.cust_box h3 {
  margin: 0;
}
.red {
  border: 2px solid red;
}
.yellow {
  background: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row yellow">

    <div class="col-sm-4 red">
      <div class="cust_box">
        <h3>Something</h3>
      </div>
    </div>

    <div class="col-sm-4 red">
      <div class="cust_box">
        <h3>Something</h3>
      </div>
    </div>

    <div class="col-sm-4 red">
      <div class="cust_box">
        <h3>Something</h3>
      </div>
    </div>

  </div>
</div>

没有颜色的例子

.cust_box {
  margin: 15px 2.5px;
  padding: 25px;
  height: 290px;
  max-width: 100%;
  background-color: #1A284B;
  color: #fff;
  border: 1px solid #162444;
}
.cust_box h3 {
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">

    <div class="col-sm-4">
      <div class="cust_box">
        <h3>Something</h3>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="cust_box">
        <h3>Something</h3>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="cust_box">
        <h3>Something</h3>
      </div>
    </div>

  </div>
</div>

Answer 2

您正在破坏引导网格系统的额外边距。 您是否尝试过使用填充而不是边距？

除此之外，您还可以自定义 bootrap 很多！ 看看这个： http://getbootstrap.com/customize/#grid-system

编辑： 我看了你的代码，看到了你的挣扎： 使用这样的内部 div：

<div class="form-group col-sm-4 col-lg-4 cust_box">
    <div class="inner">
        <h3>Something</h3>
    </div>
</div>

并在内部 div 上使用您的样式：

.cust_box .inner{
        margin-top: 15px;
        margin-bottom:15px;
        padding-left: 10px;
        padding-right:10px;
        background-color: #1A284B;
        color: #fff;
        height: 290px;
        max-width:100%;
        border: 1px solid #162444;
        margin-right: 10px; /*should not be an issue anymore*/
    }