html - Bootstrap 中的水平表单表单内联

Question

我有以下使用 bootstrap 的 HTML:

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount" readonly="readonly" value="Have a ">
        <select>
          <option value="adventure">adventure</option>
          <option value="break">break</option>                                    
      </select>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount" readonly="readonly" value=" , have a ">
        <select>
          <option value="kitkat">kitkat</option>
          <option value="twix">twix</option>
        </select>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Go!</button>
</form>

理想情况下，我要实现的目标是让所有内容都能阅读:

"Have a break, have a kitkat"

用户可以根据选择的选项造句，然后按 go。

我似乎无法让它们水平直观地显示出来。我究竟做错了什么？

是否有任何其他控件对此看起来更好？

Answer 1

咨询Bootstrap documentation on inline forms .

<form class="form-inline">
  <div class="form-group">
    Have a
    <select class="form-control"><option>Break</option></select>
    Have a
    <select class="form-control"><option>Kit kat</option></select>
  </div>
  <button type="submit" class="btn btn-default">Go</button>
</form>

Example Bootstrap fiddle