Bootstrap5注册页布局调整：如何让%MP1开头的第二行容纳全部元素

问题原因 #

第二行列的总宽度超出Bootstrap默认12列网格的宽度阈值，同时部分列使用col-md-auto自适应宽度，在中等尺寸及以下视口下，容器宽度不足以容纳全部元素，就会自动触发折行。

解决方案 #

你可以通过以下修改实现所有元素同行展示：

1. 给第二行的.row添加flex-nowrap和overflow-x-auto类：前者强制所有列在同一行排列不会换行，后者在小屏幕下提供横向滚动能力，不会挤压元素变形
2. 给所有表单标签.form-label添加text-nowrap类，避免标签文字本身折行占用额外高度和宽度
3. 可根据实际情况微调列的宽度分配，优化展示效果

修改后的第二行代码示例 #

<div class="row flex-nowrap overflow-x-auto">
  <div class="mt-3 col-md-1 align-self-center">
    <label for="perc-mp1" class="form-label text-nowrap">% MP 1:</label>
  </div>
  <div class="mt-3 col-md-1">
    <input type="text" class="form-control" aria-label="perc-mp1" name="perc-mp1" id="perc-mp1" disabled>
  </div>
  <div class="mt-3 col-md-2 align-self-center d-flex justify-content-start">
    <label for="MP2" class="form-label text-nowrap">Matéria Prima 2:</label>
  </div>
  <div class="col-md-2 mt-3 align-self-center d-flex justify-content-start">
    <select class="form-select" aria-label="MP2" name="MP2" id="MP2" disabled>
      <option value="">Selecione a MP</option>
      <option value="1">Reciclado Canela</option>
      <option value="2">Reciclado Preto</option>
      <option value="3">Reciclado Colorido</option>
      <option value="4">Reciclado Cristal</option>
      <option value="5">PEBD Virgem</option>
      <option value="6">PEAD Virgem</option>
    </select>
  </div>
  <div class="mt-3 col-md-1 align-self-center d-flex justify-content-end">
    <label for="perc-mp2" class="form-label text-nowrap">% MP 2:</label>
  </div>
  <div class="mt-3 col-md-1">
    <input type="text" class="form-control" aria-label="perc-mp2" name="perc-mp2" id="perc-mp2" disabled>
  </div>
  <div class="mt-3 col-md-2 align-self-center d-flex justify-content-start">
    <label for="MP3" class="form-label text-nowrap">Matéria Prima 3:</label>
  </div>
  <div class="col-md-2 mt-3 align-self-center d-flex justify-content-start">
    <select class="form-select" aria-label="MP3" name="MP3" id="MP3" disabled>
      <option value="">Selecione a MP</option>
      <option value="1">Reciclado Canela</option>
      <option value="2">Reciclado Preto</option>
      <option value="3">Reciclado Colorido</option>
      <option value="4">Reciclado Cristal</option>
      <option value="5">PEBD Virgem</option>
      <option value="6">PEAD Virgem</option>
    </select>
  </div>
  <div class="mt-3 col-md-1 align-self-center d-flex justify-content-end">
    <label for="perc-mp3" class="form-label text-nowrap">% MP 3:</label>
  </div>
  <div class="mt-3 col-md-1">
    <input type="text" class="form-control" aria-label="perc-mp3" name="perc-mp3" id="perc-mp3" disabled>
  </div>
</div>

如果不需要小屏幕横向滚动，也可以把列的宽度值调小，比如把下拉框的列从col-md-2改成col-md-1.5（Bootstrap5支持小数列宽），只要总宽度适配你的容器尺寸即可。

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