Bootstrap表单输入框左侧文本无法横向排列问题求助

嘿，我来帮你搞定这个布局问题！你遇到的情况是因为没有正确结合Bootstrap的栅格系统实现水平表单布局，导致标签和输入框默认堆叠显示。另外你的代码里还存在表单标签嵌套的问题，这也需要一并修正。

问题根源 #

1. 你使用了form-group row但未给<label>和输入控件分配对应的栅格列宽度（col-*类），Bootstrap的栅格系统需要明确列分配才能让元素横向排列
2. 代码里同时出现了form_open()生成的表单标签和手动写的<form>标签，属于无效嵌套，会影响表单功能和布局

修正方案 #

• 移除多余的手动<form>标签，保留PHP生成的form_open()即可
• 给<label>添加col-sm-*类（比如col-sm-2），定义标签占据的列宽
• 用带有col-sm-*类的容器包裹输入控件，让它和标签在同一行对齐
• 给标签加上col-form-label类，确保和输入控件垂直居中对齐

修改后的代码示例 #

<div class="container">
  <center>
    <h3> Jongere toevoegen </h3>
  </center>
  <br>
  <?php echo form_open('index.php/Addjongere/Add_jongere'); ?>
    <!-- 示例表单字段 -->
    <div class="form-group row">
      <label for="jongereNaam" class="col-sm-2 col-form-label">Jongere Naam</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="jongereNaam" name="jongereNaam" placeholder="Voer de naam in">
      </div>
    </div>

    <div class="form-group row">
      <label for="jongereLeeftijd" class="col-sm-2 col-form-label">Leeftijd</label>
      <div class="col-sm-10">
        <input type="number" class="form-control" id="jongereLeeftijd" name="jongereLeeftijd" placeholder="Voer de leeftijd in">
      </div>
    </div>

    <!-- 提交按钮 -->
    <div class="form-group row">
      <div class="col-sm-10 offset-sm-2">
        <button type="submit" class="btn btn-primary">Toevoegen</button>
      </div>
    </div>
  <?php echo form_close(); ?>
</div>

额外说明 #

• col-sm-2和col-sm-10是针对小屏幕及以上设备的列分配，总和为12符合Bootstrap栅格规则，你可以根据需求调整为col-md-*或col-lg-*适配不同屏幕
• offset-sm-2用来让提交按钮和输入框左对齐，保持布局一致性

这样修改后，表单标签就会乖乖显示在输入框左侧啦！

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