Bootstrap 4中实现select字段标签内联显示的方法

嘿，我明白你遇到的问题了——Bootstrap 4和Bootstrap 3的布局逻辑差得挺多的，你用Bootstrap 3的StackOverflow方案肯定行不通，因为两者的底层布局体系完全不一样：Bootstrap 3依赖浮动布局，而Bootstrap 4全面改用了Flexbox，这就是旧方案失效的核心原因。下面给你几个靠谱的解决方案，其中包含不需要依赖form-inline的选项，应该能满足你的需求：

方案1：用Bootstrap 4原生网格布局（推荐，无需额外CSS） #

利用Bootstrap自带的row和col-*网格类来实现标签与select的内联排列，这种方式最符合Bootstrap的设计规范，兼容性也最好：

<div class="form-group row align-items-center">
  <label for="mySelect" class="col-sm-2 col-form-label">你的标签文本</label>
  <div class="col-sm-10">
    <select class="form-control" id="mySelect">
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
    </select>
  </div>
</div>

• align-items-center用来让标签和select垂直居中对齐，避免视觉上的错位
• 你可以调整col-sm-2和col-sm-10的数值，来控制标签和输入框的宽度比例，适配你的页面布局

方案2：自定义Flex内联布局（无需form-inline） #

如果不想用网格系统，也可以直接用Bootstrap的Flex工具类来实现一行布局，代码更简洁：

<div class="d-flex align-items-center mb-3">
  <label for="mySelect" class="mr-2">你的标签文本</label>
  <select class="form-control flex-grow-1" id="mySelect">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
</div>

• d-flex把外层容器变成Flex容器，让内部元素自动排在一行
• mr-2给标签添加右侧间距，避免和select贴在一起
• flex-grow-1让select自动填充容器的剩余空间，适配不同宽度的容器

方案3：正确使用form-inline类（如果你想尝试这个方向） #

你之前试了form-inline但没生效，大概率是没满足Bootstrap 4对这个类的要求：它默认只在屏幕宽度≥576px时触发内联布局，而且内部元素需要配合正确的间距类：

<form class="form-inline">
  <label for="mySelect" class="mr-sm-2">你的标签文本</label>
  <select class="form-control mb-2 mr-sm-2 mb-sm-0" id="mySelect">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
  </select>
</form>

• mb-2 mr-sm-2 mb-sm-0是用来适配不同屏幕尺寸的间距类：小屏幕下给select添加上下间距，大屏幕下只保留右侧间距，避免元素拥挤

补充：为什么Bootstrap 3的方案没用？ #

Bootstrap 3的内联表单依赖float: left浮动布局和form-control-inline类，但Bootstrap 4不仅移除了form-control-inline这个类，还完全用Flexbox替代了浮动布局来实现响应式排列，所以旧方案自然无法在Bootstrap 4中正常工作啦。

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