Bootstrap系统中宽度1/3如何实现？及col-sm-8占比疑问

一、如何设置容器宽度的1/3 #

Bootstrap采用12列栅格系统，要让元素占容器宽度的1/3，只需给元素添加对应断点的col-*-4类（因为12 ÷ 3 = 4，4列占比即为1/3）。示例代码如下：

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <!-- 占容器1/3宽度的内容 -->
    </div>
  </div>
</div>

• 其中sm代表小屏幕断点（≥576px），可根据需求替换为xs（超小屏幕）、md（中等屏幕）、lg（大屏幕）、xl（超大屏幕）等，实现不同屏幕下的响应式布局。

二、给定代码的占比分析 #

你提供的代码中，元素使用了col-sm-8类：

<div class="container">
 <div class="row">
  <div class="col-sm-8">
   ...
  </div>
 </div>
</div>

按照12列栅格的计算逻辑，8列对应的占比是8/12 = 2/3，所以该元素占整个容器宽度的2/3，而非1/3。

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