Css 引导-调整特定列的大小

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

中间列没有填充，但不够

我试着制作不同尺寸的col

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

---

但是没有成功。

使用Bootstrap，您不需要添加

媒体查询

或您自己的

宽度

，只需使用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>

  <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>

.col-md-3
.col-md-6
.col-md-3

确保列总数为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;
  }

这将有额外的填充
.col-md-6
.col-md-3
.myclass{
填充：20px；
}

已更新

根据您的评论，如果您希望第6列略大于实际值，则需要扩展该列并将外部2列“收缩”为类似以下内容：

  <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>

  <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>

.col-md-2
.col-md-8
.col-md-2

如果这不是您想要的，那么您可以在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>

我的习惯左侧
我的主要专栏
我的自定义右侧

---

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

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

---

使用FlexBox或其他更灵活的CSS框架怎么样？

不，我必须使用boostrap.）在这种情况下，有没有办法添加一个新的CSS类来覆盖默认的引导行为？如果你在绿色地带剪一点呢？不，你没有理解我的问题。我需要将md-6列扩展为gitter大小的两个方向。如果我把padding-right-15px和padding-left放在一起：-15px不合适；）。谢谢大家的回答。是的，最后我自己做了一张桌子。我不知道如何使用bootstrap来实现这一点。@tine很高兴你找到了答案。据我所知，BS网格系统只是。。。网格系统。如果预定义的尺寸不能满足您的需要，那么您必须自己构建并调整尺寸。