如何在bootstrap div上定义列间距？

Question

我已经在页面上声明了三个div元素，并且想要重新定位最后一个div元素，以便它是一个更接近同一行上第二个div的字符。

我所尝试的是将第三个div上的col值编辑为较低的值，我认为这会使div更接近第二个div：

<span>

但这似乎对第三列的位置没有任何影响。

问题：

如何重新定位第3个div元素以更接近第2个div“课程代码：”？

我还尝试增加第3个div的col值，它将文本放到一个新行上。这不是必需的定位：

class="col-xs-2 col-sm-2 col-md-1"

在我的asp页面中定义如下三个div控件：

class="col-xs-7 col-sm-7 col-md-6 nwrp"

这就是目前三栏的样子：

Answer 1

实际上你需要增加第三列宽度意味着将列值拆分如下：

<div class="row">
<div class="col-md-12 ">
  <div class="col-md-3">Course Name:</div>
  <div class="col-md-2">Course Code:</div>
  <div class="col-md-7">Offer Status:</div></div>
</div>

Refer this link you can find more option.

Answer 2

bootstrap中的每一列左右都有15px填充。您可以删除它以使内容看起来更靠近左侧。 并且您在同一行中不能超过12列。

如果你想要你可以更精确地在第二个div中添加新的div而在那个div中你将有12个列，这样你就可以更精确地指定。

 <div class="col-xs-8 col-sm-8 col-md-5"><h5><strong>Course Name:</strong></h5></div>
 <div class="col-xs-3 col-sm-3 col-md-2 ">
     <div class='row'>
          <div class='col-xs-6 nwrp'>
               <h5><strong>Course Code:</strong></h5>
          </div>
          <div runat="server" id="OfferStatusTitle"  class="col-xs-6 nwrp"><h5><strong>Offer Status:</strong></h5>
          </div>
     </div>  
</div> 
<div class="col-xs-1 col-sm-1 col-md-3"></div>

确实，您可以在一行中包含12列，但在任何div标记内，您可以拥有另外12列。并且对第一个内部类使用行类，否则左右分别有30px填充，分别用于第一个和最后一个div标记。

行的左右边距为-15px。