增加两个Div之间的差距

Question

我有一个屏幕分成两部分，使用两列。

<div class="row">
        <div class="col-md-6 well">
            Left Box
        </div>
        <div class="col-md-6 well">
            Right
        </div>
    </div>

我需要在两列之间留一个小的（约10px）间隙。

http://www.bootply.com/vaOb1WdR5I

可以这样做吗？

两个盒子需要减少5个像素（在上面的例子中），因为我需要保留总宽度。

编辑：一些想法几乎可行，但我得到了额外的好，我不想要。有了这个：

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

                @Html.Action("ShowDuePayments", "Transaction")

        </div>
        <div class="col-md-6">

                @Html.Action("ShowRecentTransactions", "Transaction")

        </div>
    </div>

我明白了：

'under'well div不应该是可见的。

Answer 1

有几点：

1. 你不应该在Bootstrap列中添加额外的类（这不是一个严格的规则，但是一个很好的建议）
2. 您错过了容器包装。

使用这些规则进行更改，它看起来像这样：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div class="container">
	<div class="row">
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-12">
              <div class="well">Left Top Box</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="well">Left Bottom Box</div>
            </div>
          </div>
        </div>
      
        <div class="col-md-6">
            <div class="well">Right Box</div>
        </div>
    </div>
</div>

Answer 2

这个怎么样？

<div class="row">
    <div class="col-md-6" style='padding-right:5px'>
      <div class='well'>
        Left Box
      </div>
    </div>
    <div class="col-md-6" style='padding-left:5px'>
      <div class='well'>
        Right
      </div>
    </div>
</div>

http://www.bootply.com/Ogrte6IQzw

如果删除内联样式，则引导程序将提供自然间距，即15px填充。

Answer 3

您可以更改col-md-6的班级并添加width:49%，并添加到第2个div添加pull-right类，如：

HTML：

<div class="row">
    <div class="col-md-6 well">
        Left Box
    </div>
    <div class="col-md-6 well pull-right">
        Right
    </div>
</div>

CSS：

.col-md-6{
    width:49%;
}

Answer 4

您还可以尝试在两个div标签中添加填充，即：

.col-md-6{
    padding:5px;
}

这会为所有方面添加一些填充 - 除非您使用padding-left＆amp; padding-right并为div分配不同的类名 - 取决于您希望如何布置代码。

Answer 5

您还可以使用其他类，因此您只需修改特殊的第6列元素，而不是修改您网站上的所有元素。此示例还使用基于百分比的宽度作为Flopet17s。您可以调整百分比数字以更好地适应您想要的间隙宽度。

.withgap {
   width: 49%;
   margin-right:1%;
 }

<div class="row">
  <div class="col-md-6 well withgap">
    Left Box
  </div>
  <div class="col-md-6 well">
    Right
  </div>
</div>