css - 在两个 Div 之间添加间隙

Question

我将屏幕一分为二，使用两列。

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

我需要两列之间有一个小的(大约 10 像素)间隙。

http://www.bootply.com/vaOb1WdR5I

这可以做到吗？

两个框都需要减少 5 pix(在上面的示例中)，因为我需要保留总宽度。

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

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

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

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

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

        </div>
    </div>

我明白了:

“下方”井 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>