如何删除引导网格上的空间

Question

我根据网格规则创建了3个div标签

<div class="row">
    <div  class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
    <div class="col-md-9" style="   border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
    <div class="col-md-3" style="   border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>

1. Div = Black
2. Div = Red
3. Div = Blue

排名不变，我想删除黑色和蓝色之间的空间。 我该如何删除它，那么黑色和蓝色的div应该是一个在另一个之下？

Answer 1

<div class="left"> 
   <div  class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
   <div class="col-md-3" style="   border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>

<div class = "right> <div class="col-md-9" style="   border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div> </div>

Answer 2

您只能使用2列来完成此行为：左列（col-xs-3）和右列（col-xs-9）。

然后在左列中创建另外两个div元素，每个元素一个。由于div是一个块元素，你最终会得到另一个div。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-3">
    <div style=" border:1px solid black;">
      black
    </div>
    <div style="border:1px solid blue;">
      blue
    </div>
  </div>
  <div class="col-xs-9" style="border:1px solid red;">
    red
  </div>
</div>

由于您不想更改元素的顺序，您可以尝试类似下面的代码段。

但我会建议您阅读有关grid system的更多信息。你应该在每一行中最多有12列。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-3" style="border: 1px solid #000">
    black
  </div>
  <div class="col-xs-9 pull-right" style="border: 1px solid #f00">
    <div>red</div>
    <div>red</div>
    <div>red</div>
    <div>red</div>
    <div>red</div>
    <div>red</div>
    <div>red</div>
    <div>red</div>
  </div>
  <div class="col-xs-3" style="border: 1px solid #00f">
    blue
  </div>
</div>

Answer 3

或者你可以这样做，这将删除bootstrap网格中的空间。

实施例

HTML

<div class="no-pad>
<div class="col-lg-12>
/*--Content--*/
</div>
</div>

CSS

.no-pad [class*="col-"] {
    padding:0;
    margin: 0;
}