如何修改Bootstrap网格的列宽度？附问题代码及失败尝试说明

阿华AIGC实验室

2026-5-15

解决Bootstrap网格列宽度自定义不生效的问题

嘿，我看到你在调整Bootstrap 3网格列宽度时碰了壁，咱们一步步拆解问题，把它搞定～

首先，你当前代码里有个最明显的问题：选择器不匹配。你CSS里写的是类选择器 .left-box，但HTML里给目标div加的是 id="left-box"——这俩根本对应不上，所以你的样式完全没作用在目标元素上。

第一步：修正选择器匹配

先把选择器统一，二选一就行：

要么把CSS里的 .left-box 改成 #left-box（用ID选择器）
要么把HTML里的 id="left-box" 改成 class="left-box"（推荐用类，后续复用更灵活）

第二步：提高样式优先级，覆盖Bootstrap默认样式

就算选择器匹配了，Bootstrap的列类（比如col-xs-6、col-md-4）本身就带有width属性，你的自定义样式优先级不够的话还是会被覆盖。这里有两种靠谱的解决方式：

方式1：用更具体的选择器

通过增加选择器的特异性，让你的样式优先级超过Bootstrap的列类。比如：

/* 用.row + 类选择器，特异性比单独的.col-xs-6高 */
.row .left-box {
  background-color: green;
  width: 20%;
}

对应的HTML（把ID改成类）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <div class="col-xs-6 col-md-4 left-box">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
</div>

方式2：使用`!important`（万不得已再用）

如果更具体的选择器还是不生效，可以在width属性后加!important强制覆盖：

.left-box {
  background-color: green;
  width: 20% !important;
}

进阶方案：自定义Bootstrap列类

如果你经常需要自定义列宽，不如直接写一个符合Bootstrap风格的自定义列类，这样更规范也更灵活：

/* 模仿Bootstrap列的样式，加上浮动和内边距 */
.col-custom-20 {
  width: 20%;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
}

然后在HTML里直接用这个类替换默认列类：

<div class="row">
  <div class="col-custom-20 left-box">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
  <div class="col-xs-6 col-md-4">
    <h6>About me</h6>
  </div>
</div>