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>

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

＆＃34;休息一下，有一个kitkat＆＃34;

如果用户可以根据选择的选项形成一个句子并按下去。

我似乎无法让它们看起来水平和直观。我究竟做错了什么？

是否还有其他控件对此更好？

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

水平表单形式在引导程序中

1 个答案: