如何在Bootstrap 4中设置自定义列宽？非Sass方案求助

嘿，我懂你现在的困扰——想把侧边栏设成1.5列宽、内容区设成8.5列宽，不想用Sass，试了旧方案却没效果对吧？其实不是Bootstrap 4的变动导致完全没法实现，而是你需要针对Bootstrap 4的flexbox网格系统调整自定义CSS的写法，而且你之前的代码只加了自定义类，但没给这些类定义对应的宽度样式，所以自然没效果啦。

为什么旧方法没用？ #

你参考的那篇帖子里的方案大多是针对Bootstrap 3的浮动网格系统的，而Bootstrap 4改用了flexbox实现网格。虽然核心还是12列的布局逻辑，但列的宽度计算方式变了，直接用col-sm-1-5这种命名的类如果没有对应的CSS规则，浏览器根本不知道它应该占多少宽度。

不用Sass的解决方案 #

既然你不想用Sass，我们可以直接写自定义CSS类，基于12列的比例计算出对应的百分比：

• 1.5份的宽度：(1.5 / 12) * 100% = 12.5%
• 8.5份的宽度：(8.5 / 12) * 100% ≈ 70.833%

结合Bootstrap的响应式断点（sm对应≥576px的屏幕），写出下面的完整代码：

HTML代码

<div class="container-fluid">
  <div class="row">
    <aside class="col-sm my-aside col-sm-custom-1-5">
      <!-- 侧边栏内容 -->
    </aside>
    <section class="col-sm fill-screen col-sm-custom-8-5">
      <!-- 内容区内容 -->
    </section>
    <aside class="col-sm my-aside col-sm-custom-1-5">
      <!-- 侧边栏内容 -->
    </aside>
  </div>
</div>

CSS代码

/* 针对sm断点及以上屏幕生效 */
@media (min-width: 576px) {
  .col-sm-custom-1-5 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
  .col-sm-custom-8-5 {
    flex: 0 0 70.833%;
    max-width: 70.833%;
  }
}

代码说明 #

• 保留Bootstrap的col-sm类，确保在小屏幕（<576px）时列会自动堆叠，保证响应式效果；
• 自定义类通过flex和max-width属性，在sm断点以上设置对应宽度，完全贴合Bootstrap 4 flex网格的宽度控制逻辑；
• 计算出的百分比刚好让三个列的宽度总和接近100%，不会出现换行或溢出问题。

你之前的代码问题 #

你之前只是在HTML里添加了col-sm-1-5这类自定义类，但没有给这些类编写对应的CSS规则，浏览器不知道它们的宽度应该是多少，自然看不到预期效果。补上上面的CSS代码，就能实现你想要的布局啦。

内容的提问来源于stack exchange，提问作者KulturystaProgramista