Bootstrap - 调整特定列的大小

Question

我不知道如何制作这种col 3和6尺寸。

中间列没有填充，但这还不够。

我试图制作不同大小的col。

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

但没有成功。

Answer 1

使用Bootstrap，您无​​需添加media queries或您自己的width，只需使用BS网格系统（you can read more here）并让它处理所有艰难的工作。根据你的图片，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>

如果那不是你想要的，那么你可以在bootstrap中创建自己的表。

  <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个相等的部分，它才有效。重写这条规则可能会破坏其他东西。

如何更灵活地使用flexboxes或其他CSS框架？