Bootstrap网格在最小窗口尺寸下布局崩溃问题咨询

嘿，我来帮你搞定这个布局崩溃的问题～你现在遇到的情况，是因为代码里用的col-2、col-8这类是**超小屏幕（<576px）**的固定宽度列，当窗口缩到极小的时候，label、输入框和右侧的文本会挤在同一行，导致内容溢出或者布局错乱。下面给你两个靠谱的解决方案：

方案1：用响应式列类实现自动堆叠 #

把固定的col-*改成col-sm-*这类带断点的列类，这样在屏幕宽度小于576px（Bootstrap的sm断点）时，每一列都会自动占满整行，避免挤在一起：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <label class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-8">
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-2">
      text
    </div>
  </div>
</div>

方案2：适配极小屏幕的灵活布局 #

如果想在极小屏幕下尽量保持行内布局但避免溢出，可以调整列的宽度分配，再配合flex布局的辅助类：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row flex-wrap">
    <label class="col-3 col-sm-2 col-form-label">Email</label>
    <div class="col-7 col-sm-8">
      <input type="text" class="form-control">
    </div>
    <div class="col-2 col-sm-2 align-self-center">
      text
    </div>
  </div>
</div>

这里给超小屏幕设置了col-3、col-7、col-2的宽度分配，flex-wrap确保空间不足时自动换行，align-self-center还能让右侧的文本垂直居中，体验更好。

小提示 #

Bootstrap 4是移动优先的网格系统，col-*是最基础的超小屏幕样式，如果你没设置更大屏幕的类，所有尺寸都会沿用这个布局。用col-sm-*、col-md-*这类带断点的类，能让布局在不同屏幕尺寸下自动调整，从根源避免布局崩溃的问题～

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