Bootstrap栅格列中form-inline表单无法横向排列问题排查

以下是常见错误原因及对应解决方法：

1. 核心资源引入不规范 #

• 必须在<head>中引入Bootstrap CSS，且添加视口元标签确保响应式布局生效：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

• 自定义CSS需放在Bootstrap CSS之后，避免覆盖核心样式。

2. 栅格列宽不足 #

form-inline需要足够水平空间才能横向排列控件，若左列宽度过小，控件会自动堆叠：

• 用col-md-*等响应式栅格类分配宽度，比如左列设为col-md-8、右列col-md-4，确保中等及以上屏幕有充足空间；
• 若需移动端也保持横向排列，可搭配col-*类并给控件加w-auto限制宽度。

3. 表单控件未用正确类名 #

form-inline内的控件必须添加form-control类，才能触发Bootstrap行内布局样式，同时用间距类（如mr-2）或form-group分隔控件：

<form class="form-inline">
  <div class="form-group mr-2">
    <input type="text" class="form-control" placeholder="用户名">
  </div>
  <div class="form-group mr-2">
    <input type="password" class="form-control" placeholder="密码">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

4. 自定义样式冲突 #

检查是否有自定义CSS给form-inline内的控件设置了display: block或width: 100%，这类规则会强制控件堆叠。可通过浏览器开发者工具查看元素样式，定位并修改冲突规则。

完整修正示例代码 #

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <form class="form-inline">
        <div class="form-group mr-2">
          <label for="username" class="sr-only">用户名</label>
          <input type="text" class="form-control" id="username" placeholder="用户名">
        </div>
        <div class="form-group mr-2">
          <label for="password" class="sr-only">密码</label>
          <input type="password" class="form-control" id="password" placeholder="密码">
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>
    </div>
    <div class="col-md-4">
      <form>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="搜索">
          <div class="input-group-append">
            <button class="btn btn-secondary" type="submit">搜索</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

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