Question

我正在使用Bootstrap并尝试使用bootstrap 12列样式居中3个div块。所以每个div占用4列。我希望这些列之间有一些间距，因此我在右边添加了10px的边距。这将第3个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

带有额外的余量，你正在摧毁引导网格系统。你尝试过使用填充而不是边距吗？

除此之外，你可以自定义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*/
    }

Answer 2

将您的班级this.myProperty = "Hey";放在列中。 h3有边距，因此也可能会干扰您的布局。您可能还想使用cust_box类而不是row。

请参阅工作示例代码段。（添加了颜色，以便您可以看到实际发生的事情）

＆＃13;

form-group

＆＃13;

.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;
}

＆＃13;

没有颜色的示例

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

无法在行上获取所有列

2 个答案: