如何使Bootstrap面板中的两个文本框分属不同行？

嗨，我仔细看了你的代码，问题的核心在于你使用了Bootstrap的栅格系统（col-md-3类）但没遵循正确的布局结构，导致两个文本框并排显示。另外你尝试的<br>标签和自定义CSS没生效，也是因为Bootstrap的浮动布局优先级更高。

为什么现有方法无效？ #

• Bootstrap的col-*类默认是浮动布局，两个col-md-3元素会自动并排，<br>标签无法打断浮动元素的排列逻辑。
• 你写的自定义CSS被Bootstrap内置样式覆盖了——Bootstrap的.form-control和栅格类样式优先级更高，而且父元素的浮动属性才是导致并排的关键，不是输入框本身的display属性。

两种简单修复方案 #

方案1：移除栅格类，让表单元素自然块级显示

直接去掉col-md-3类，标签和输入框会默认以块级元素显示，自动各占一行：

<div class="form-group">
  <label><span style="color:red">*</span>Enter your name</label>
  <input id="candidate-name" name="candidate-name" type="text" placeholder="John" class="form-control input-md" required>
</div>
<div class="form-group">
  <label><span style="color:red">*</span>Enter your email</label>
  <input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe@example.com" class="form-control input-md" required>
</div>

方案2：保留栅格对齐，用row包裹每个表单组

如果你想保持标签和输入框的对齐布局，可以给每个form-group添加row类，同时调整输入框所在的col宽度（比如改成col-md-9占满剩余空间），这样每个表单组会作为独立的行存在：

<div class="form-group row">
  <label class="col-md-3 control-label"><span style="color:red">*</span>Enter your name</label>
  <div class="col-md-9">
    <input id="candidate-name" name="candidate-name" type="text" placeholder="John" class="form-control input-md" required>
  </div>
</div>
<div class="form-group row">
  <label class="col-md-3 control-label"><span style="color:red">*</span>Enter your email</label>
  <div class="col-md-9">
    <input id="candidate-email" name="candidate-email" type="email" placeholder="johndoe@example.com" class="form-control input-md" required>
  </div>
</div>

额外提示 #

你页面里重复引入了两个版本的Bootstrap CSS（3.1.0和3.4.1），建议只保留一个版本，避免潜在的样式冲突。

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