如何在Bootstrap网格系统中调整单个div至col-sm-1与col-sm-2之间的宽度

问题场景 #

现有如下Bootstrap代码：

<div class="col-sm-2" style="text-align: right;" >
        mytext1
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext2
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext3
</div>

需要仅缩小第二个div的宽度，不想使用col-sm-1（尺寸过小）或col-sm-2（尺寸过大），希望设置类似col-sm-1.5的中间宽度，请问有什么解决方法？

解决方法 #

方法1：自定义CSS类（推荐，可复用）

Bootstrap的12列栅格中，col-sm-1对应8.333%宽度，col-sm-2对应16.666%，1.5列的宽度刚好是12.5%。直接写一个自定义类：

/* 适配sm及以上断点的1.5列宽度类 */
.col-sm-1-5 {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

然后修改第二个div的类即可：

<div class="col-sm-2" style="text-align: right;" >
        mytext1
</div>
<div class="col-sm-1-5" style="text-align: right;" >
        mytext2
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext3
</div>

方法2：内联样式快速调整（仅单次生效）

如果只需要这一处应用该宽度，直接用内联样式覆盖，不用额外写CSS：

<div class="col-sm-2" style="text-align: right;" >
        mytext1
</div>
<div class="col-sm-auto" style="text-align: right; flex: 0 0 12.5%; max-width: 12.5%;" >
        mytext2
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext3
</div>

这里用col-sm-auto作为基础类，再通过flex和max-width固定宽度，确保在sm断点及以上生效。

方法3：用flex比例分配宽度（灵活适配）

如果不想硬写百分比，可利用flex布局的比例特性，给三个列设置不同的flex值来分配宽度：

<div class="row">
  <div class="col-sm" style="text-align: right; flex: 1.5 0 auto;" >
          mytext1
  </div>
  <div class="col-sm" style="text-align: right; flex: 1 0 auto;" >
          mytext2
  </div>
  <div class="col-sm" style="text-align: right; flex: 1.5 0 auto;" >
          mytext3
  </div>
</div>

这种方式下，三个列会按照1.5:1:1.5的比例分配父容器的宽度，适配性更强。

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