Bootstrap 4超小屏幕col宽度无法占100%的问题排查

嘿，这个问题我之前也碰到过！核心原因是你对Bootstrap 4的网格类优先级和移动优先逻辑理解有点偏差～

你当前写的col col-6存在冲突：col-6是强制所有屏幕（包括超小屏）都占50%宽度，而col的弹性自动分配优先级低于明确的断点类（比如col-6），所以超小屏下自然不会占满100%。

最优解决方案 #

如果你想要的是「大屏幕（≥768px）下均分两列，超小屏下每列占满整行」，直接把col col-6改成col-md-6即可。Bootstrap 4是移动优先框架，未指定xs断点类时，xs及以下屏幕会默认让列占12列（100%宽度），完美匹配你的需求。

修正后的代码示例 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> 
<div class="container"> 
  <div class="form-row"> 
    <!-- 第一列：大屏幕占50%，超小屏占100% -->
    <div class="col-md-6"> 
      <div class="md-form"> 
        <input type="text" class="form-control" placeholder="输入框1">
      </div>
    </div>
    <!-- 第二列：和第一列均分大屏幕宽度 -->
    <div class="col-md-6">
      <div class="md-form">
        <input type="text" class="form-control" placeholder="输入框2">
      </div>
    </div>
  </div>
</div>

额外小提示 #

• form-row是Bootstrap专为表单设计的行，它的内外边距适配了表单控件的间距，完全不需要换成普通的row。
• 如果需要针对更小的断点（比如<576px）做特殊设置，可以用col-xs-12，但通常不需要，因为移动优先的默认行为已经满足需求。

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