html - 如何在默认的 Bootstrap 3 表单中添加内联组件？

Question

我需要在 TB3 的 form-group 类中添加一个“内联”控件，但我做不到。这是我尝试过但没有成功的方法，这意味着它无法按我的意愿工作:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form id="new_question" method="POST" class="form-vertical" role="form">
        <div class="form-group">
          <label for="field_type_id">Select a Question Type</label>
          <select class="form-control" id="field_type_id" name="field_type_id">
            <option value="">Select One</option>
          </select>
        </div>
        <div class="form-group">
          <label for="field_name">Question Text</label>
          <textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Option 1</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value=""> Checkbox
          </label>
        </div>
      </form>
    </div>
  </div>
</div>

根据上面的代码片段/示例，我预计:

• 保持第一个和第二个元素不变:标签在顶部，然后是 HTML 元素
• 制作第三个元素的内联版本:首先有选项，然后是 HTML，然后是复选框，这意味着一行中的所有内容。

这个想法是有类似的东西:

Label1 Input1 Checkbox1
Label2 Input2 Checkbox2

有人知道如何实现吗？它必须只在特定行中完成，因此表格的其余部分表现为 form basic example。 .

Answer 1

例如，您可能希望使用 Grid system 中的列:

<form role="form">
    <div class="form-group col-sm-2">
        <label>Some label</label>
    </div>
    <div class="form-group col-sm-2">
        <label>E-mail</label>
        <input type="email" class="form-control">
    </div>
    <div class="form-group col-sm-2">
        <div class="checkbox">
            <label>
                <input type="checkbox" class="form-check-input"> Check me out
            </label>
        </div>
    </div>
</form>

上面的示例使用预定义的网格类 col-sm-2

创建了 3 个等宽的列