Question

我试图在引导程序中创建一个网格，行和列之间的空间相同。使用填充0,0,0，留下cero空间，但如果我使用填充10,10,10,10它不起作用，在行和列之间留出不同的空格。看我的代码：

<style>
.box {
    padding:0 0px 0 0px;
}

</style>
<div class="container">   
<br><br>
<div class="row  margin-bottom-0">
<div class="col-md-4 box">
    <div class="col-md-12 col-sm-12 box">
    <div class="col-md-6 col-sm-6 box" style="background-color:red;   height: 150px;">  </div>
    <div class="col-md-6 col-sm-6 box" style="background-color:yellow;height: 150px;">  </div>
    </div>    
    <div class="col-md-12 col-sm-12 box" style="background-color:pink;height: 250px;">  </div>
</div>

<div class="col-md-4 box">
    <div class="col-md-12 col-sm-12 box" style="background-color:DeepPink;height: 250px;">  </div>
    <div class="col-md-12 col-sm-12 box">
    <div class="col-md-6 col-sm-6 box" style="background-color:darkblue;height: 150px;">    </div>
    <div class="col-md-6 col-sm-6 box" style="background-color:orange;  height: 150px;">    </div>
    </div>  
</div>

<div class="col-md-4 box ">
    <div class="col-md-12 col-sm-12 box">
    <div class="col-md-6 col-sm-6 box" style="background-color:magenta;height: 150px;"> </div>
    <div class="col-md-6 col-sm-6 box" style="background-color:yellow; height: 150px;"> </div>
    </div>  
    <div class="col-md-12 col-sm-12 box" style="background-color:BlueViolet;height: 250px;">    </div>
</div>

我想要的东西： enter image description here

Answer 1

我认为这是您尝试做的事情：如果您要对列进行嵌套，请同时使用行（<div class="col-md-12 col-sm-12 box">内有列）并放置内容（框）在列内，而不是与列类相同的行。然后添加填充要求。

请参阅Docs。

中的网格嵌套

请参阅工作代码段。

＆＃13;

body {
  padding-top: 10px;
}
.grid > [class*='col-'] {
  padding: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="row grid">

        <div class="col-md-6 col-sm-6">
          <div class="box" style="background-color:red; height: 150px;">
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="box" style="background-color:yellow;height: 150px;">
          </div>
        </div>

        <div class="col-md-12 col-sm-12">
          <div class="box" style="background-color:pink;height: 250px;">
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="row grid">
        <div class="col-md-12 col-sm-12">
          <div class="box" style="background-color:DeepPink;height: 250px;">
          </div>
        </div>

        <div class="col-md-6 col-sm-6">
          <div class="box" style="background-color:darkblue;height: 150px;">
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="box" style="background-color:orange;  height: 150px;">
          </div>
        </div>

      </div>
    </div>

    <div class="col-md-4 ">
      <div class="row grid">

        <div class="col-md-6 col-sm-6">
          <div class="box" style="background-color:magenta;height: 150px;">
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="box" style="background-color:yellow; height: 150px;">
          </div>
        </div>

        <div class="col-md-12 col-sm-12">
          <div class="box" style="background-color:BlueViolet;height: 250px;">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

行和列引导之间的相同空间

1 个答案: