Question

我有这些引导HTML div：

        <div class="row">
            <div class="col-md-3 text-center mypanel"><h3>6<br></h3>BIDS:</div>
            <div class="col-md-3 text-center mypanel"><h3>47.5<br></h3>LOWEST:<br></div>
            <div class="col-md-3 text-center mypanel"><h3>49<br></h3>AVERAGE:<br></div>
            <div class="col-md-3 text-center mypanel"><h3 class="text-bold">51<br></h3>HIGHEST:<br></div>
        </div>

现在我尝试设置div之间的距离，所以我添加到.mypanel类 - margin-left，所以：

.mypanel{
    margin-bottom: 20px;
    background-color: #fbfbfb;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
    margin-right: 15px;
    margin-left: 15px;
}

但现在我无法把它放到一行，因为4个div会低于其他div ...我怎么能解决这个问题？

Answer 1

解决此问题的一个好方法是在node_modules内添加另一个div并给它一个保证金。这样，您可以在引导网格中设置元素的样式，但不会破坏引导结构本身。

Demo

这样的事情：

.mypanel

现在可以通过更改此值来调整边距。

查看下面的完整演示：

.mypanel{
  ...
}

.mypanel > div {
  margin: 0 15px;
  ...
}

.mypanel{
    margin-bottom: 20px;
}

.mypanel > div {
  margin: 0 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  background-color: #fbfbfb;
}

Div之间的CSS距离

1 个答案: