Bootstrap3使用Grid布局实现单行12列却显示为12行问题求解

你使用的Bootstrap 3.x版本的栅格系统规则和高版本不同，必须为栅格类指定响应式断点前缀，你写的col-1是Bootstrap 4及更高版本才支持的无断点通用栅格类，Bootstrap 3.3.5无法识别这个类，因此列元素没有获得浮动、宽度等栅格样式，作为默认块级元素就会各占一行。

Bootstrap 3的栅格断点前缀对应规则：

• col-xs-*：超小屏幕（手机，小于768px）生效，且不会在更大屏幕下自动折行
• col-sm-*：小屏幕（平板，大于等于768px）生效
• col-md-*：中等屏幕（桌面，大于等于992px）生效
• col-lg-*：大屏幕（大桌面，大于等于1200px）生效

你要实现所有屏幕尺寸下都12个等宽列不折行，只需要把所有col-1替换为col-xs-1即可。

修改后的对应代码片段：

<div class="row">
    <div class="col-xs-1 box">1</div>
    <div class="col-xs-1 box">2</div>
    <div class="col-xs-1 box">3</div>
    <div class="col-xs-1 box">4</div>
    <div class="col-xs-1 box">5</div>
    <div class="col-xs-1 box">6</div>
    <div class="col-xs-1 box">7</div>
    <div class="col-xs-1 box">8</div>
    <div class="col-xs-1 box">9</div>
    <div class="col-xs-1 box">10</div>
    <div class="col-xs-1 box">11</div>
    <div class="col-xs-1 box">12</div>
</div>

如果需要只在平板及以上尺寸保持12列，小屏幕自动折行，替换为col-sm-1即可。

内容的提问来源于stack exchange，提问作者Harsha Sri Sameera