Bootstrap Grid：列尺寸是否自动继承？新手开发技术疑问

为什么xs尺寸下内容无法显示？ #

这取决于你使用的Bootstrap版本：

• 如果你用的是Bootstrap 3：栅格系统要求超小屏幕（xs）必须显式指定col-xs-*类，你代码里的col在Bootstrap 3中是无效类，导致xs尺寸下没有正确的列宽度设置，最终内容显示异常。Bootstrap 3的栅格是移动优先，但xs尺寸的样式不会自动继承更大尺寸的设置，必须手动声明。
• 如果你用的是Bootstrap 4+：col类默认对应xs尺寸的12列宽度，理论上不会出现内容隐藏的情况，这时候可能是其他自定义样式冲突导致的，但结合你的描述，更大概率是用了Bootstrap 3。

实现xs和sm尺寸同列宽的最优写法 #

利用Bootstrap栅格移动优先、向上继承的特性，不用重复编写相同列宽的类：

• Bootstrap 3 写法：

  <div class="row">
    <div class="col-xs-6 col-md-4 col-lg-3 text-center">
  

  这里col-xs-6会作用于xs及所有更大尺寸，直到遇到col-md-4覆盖md及以上尺寸的列宽，col-lg-3再覆盖lg及以上。这样xs和sm尺寸都会保持6列宽度，无需额外写col-sm-6。

• Bootstrap 4+ 写法：

  <div class="row">
    <div class="col-6 col-md-4 col-lg-3 text-center">
  

  Bootstrap 4中col-*对应xs尺寸，col-6会作用于xs及以上，直到col-md-4和col-lg-3分别覆盖对应尺寸，同样不用重复写col-sm-6就能让xs和sm保持同宽。

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