Bootstrap网格：如何设置介于col-xx-1与col-xx-2之间的列宽？

嘿，我来帮你搞定这个需求！Bootstrap 3的原生栅格是基于12列的整数划分，所以没办法直接用col-sm-1.5这种非整数的类名。不过我们可以通过两种简单的方法实现你想要的效果——把第二列设置成介于col-sm-1和col-sm-2之间的宽度，同时把剩余空间分配给下一个列。

方法一：自定义栅格列类（贴合Bootstrap原生逻辑） #

Bootstrap的col-sm-n类本质是通过(n/12)*100%来计算宽度的，所以我们可以照着这个逻辑写自定义类：

• 如果你想要的是1.5个基础列的宽度（也就是介于1和2之间，宽度为12.5%），可以创建col-sm-1-5类；
• 原来的第三列是col-sm-5，现在要把第二列多出来的0.5列空间补上，所以需要自定义col-sm-5-5类（宽度为calc(5.5/12*100%)）。

先添加自定义CSS：

/* 自定义1.5列宽度的sm断点类 */
.col-sm-1-5 {
  width: 12.5%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

/* 自定义5.5列宽度的sm断点类 */
.col-sm-5-5 {
  width: calc(5.5 / 12 * 100%);
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

然后修改你的HTML结构，替换对应的类名：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.col-sm-1-5 {
  width: 12.5%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-sm-5-5 {
  width: calc(5.5 / 12 * 100%);
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
</style>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-3"> first text here </div>
      <div class="col-sm-1-5"> 此列已设置为相当于"col-sm-1.5"的宽度，给下一个div留出更多空间 </div>
      <div class="col-sm-5-5"> third text here </div>
      <div class="col-sm-1"> forth text here </div>
      <div class="col-sm-1"> forth text here </div>
    </div>
  </div>
</div>

方法二：改用Flexbox布局（更灵活） #

如果你不想纠结百分比计算，可以改用Flexbox来实现——给外层的row添加Flex属性，直接通过比例分配空间，比浮动布局更直观：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.flex-row {
  display: flex;
  flex-wrap: wrap;
}
/* 按比例分配空间：3份、1.5份、5.5份、1份、1份，总和为12 */
.flex-col-3 { flex: 3; }
.flex-col-1-5 { flex: 1.5; }
.flex-col-5-5 { flex: 5.5; }
.flex-col-1 { flex: 1; }
/* 保留Bootstrap的内边距样式 */
.flex-row > div {
  padding-right: 15px;
  padding-left: 15px;
}
</style>
<div class="container">
  <div class="row flex-row">
    <div class="flex-col-3"> first text here </div>
    <div class="flex-col-1-5"> 此列宽度为1.5份，给下一个div留出更多空间 </div>
    <div class="flex-col-5-5"> third text here </div>
    <div class="flex-col-1"> forth text here </div>
    <div class="flex-col-1"> forth text here </div>
  </div>
</div>

额外小提醒 #

如果你其实是想要col-sm-2的一半宽度（也就是和col-sm-1一样的8.333%），那直接把第二列改成col-sm-1，第三列改成col-sm-6就可以了——3+1+6+1+1刚好凑满12列，这种情况完全不用自定义类，更简单！

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