Bootstrap布局问题：如何实现文本框并排及Textarea旁放置文本框

嗨，作为Bootstrap老玩家，我来一步步帮你搞定这些布局问题！Bootstrap的栅格系统是实现这类布局的核心，咱们结合你的代码来修改和完善。

一、如何让两个文本框并排排列 #

要实现两个文本框并排，关键是把它们放在同一个form-group下的不同栅格列中，利用Bootstrap的12栏栅格分配宽度。比如这样：

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">并排文本框</label>
    <!-- 第一个文本框占4栏 -->
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="第一个文本框">
    </div>
    <!-- 第二个文本框占4栏 -->
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="第二个文本框">
    </div>
  </div>
</form>

解释一下：

• form-horizontal让表单元素水平排列，label和输入框在同一行
• 每个col-sm-*类控制不同屏幕尺寸下的宽度，总和不超过12就行，这里2（label）+4+4=10，剩下的2栏会自动留白，你也可以调整数值比如col-sm-3+col-sm-3来让两个文本框更窄

二、在Textarea旁安排两个文本框 #

结合你给出的不完整代码，我帮你完善成完整的示例，实现Textarea和两个并排文本框在同一行：

<form class="form-horizontal">
  <!-- 你原来的Fname部分完善版 -->
  <div class="form-group">
    <label class="col-sm-2 control-label">Fname</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" placeholder="fname">
    </div>
  </div>

  <!-- Textarea与两个并排文本框的布局 -->
  <div class="form-group">
    <label class="col-sm-2 control-label">内容与附加信息</label>
    <!-- Textarea占4栏 -->
    <div class="col-sm-4">
      <textarea class="form-control" rows="3" placeholder="请输入内容"></textarea>
    </div>
    <!-- 两个文本框放在一个col里，内部拆分宽度 -->
    <div class="col-sm-4">
      <div class="form-group">
        <div class="col-sm-6">
          <input type="text" class="form-control" placeholder="文本框1">
        </div>
        <div class="col-sm-6">
          <input type="text" class="form-control" placeholder="文本框2">
        </div>
      </div>
    </div>
  </div>
</form>

这里的关键是：

• 把Textarea放在一个col-sm-4里，旁边的两个文本框放在另一个col-sm-4里，内部再用col-sm-6让它们各自占一半宽度，实现并排
• 给内部的文本框套一个form-group，避免样式混乱
• 在小屏幕（比如手机）上，这些元素会自动堆叠成垂直排列，这是Bootstrap响应式的天然优势~

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