引导-调整特定列的大小

Question

我不知道怎么做这种三、六号的。

​

​

中间列没有填充，但它是不够的。

我试着做不同尺寸的柯尔。

@media (min-width:992px){   
    .col-md-6 { width: 52,5641%;}
    .col-md-3 { width: 23,7179%;}
}

但没有成功。

Answer 1

使用引导带，您不需要添加media queries或您自己的width，只需使用BS网格系统(你可以在这里读到更多)，让它来处理所有困难的工作。根据您的图片，3列布局将使用如下所示：

  <div class="row">
      <div class="col-md-3">.col-md-3</div>
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-3">.col-md-3</div>
  </div>

确保您的列总数为12，如上面(3+6+3)所示，如果您需要在列之间添加额外的填充，只需添加一个嵌套的DIV并将您想要的间距应用到这些列中。

  <div class="row">
      <div class="col-md-3">
        <div class="myclass">
           this will have extra padding
        </div>
      </div>
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-3">.col-md-3</div>
  </div>

  .myclass {
     padding: 20px;
  }

更新的

根据您的评论，如果希望第6列略大于实际值，则需要展开该列并“收缩”外部2列如下：

  <div class="row">
      <div class="col-md-2">.col-md-2</div>
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-2">.col-md-2</div>
  </div>

如果这不是您想要的，那么您可以在引导内创建您自己的表。

  <div class="row">
      <div class="custom-col">My custom left side</div>
      <div class="custom-main">my main column</div>
      <div class="custom-col">My custom right side</div>
  </div>

根据需要调整每个列的大小。

Answer 2

也许Bootstrap不是解决问题的最佳选择。如果你能把屏幕分成12个相等的部分，它就能工作。重写这条规则可能会破坏其他东西。

如何使用柔性盒或其他更灵活的CSS框架呢？