Question

Bootstrap表单中的某些表单元素是否可以内联，而其余表单元素不是？

在我的表单中，我想让所有内容占据整个6列，除了city，state和ZIP应该占用一行。请参阅以下代码：

<form id="main-form" role="form">
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="bill-name">Name</label>
        <input type="text" class="form-control" id="bill-name"
        placeholder="Full name">
      </div>
      <div class="form-group">
        <label for="bill-company">Company</label>
        <input type="text" class="form-control" id="bill-company"
        placeholder="Company name">
      </div>
      <div class="form-group">
        <label for="bill-address1">Address</label>
        <input type="text" class="form-control" id="bill-address1"
        placeholder="Street address">
      </div>
      <div class="form-group">
        <label for="bill-address2">Address 2</label>
        <input type="text" class="form-control" id="bill-address2"
        placeholder="Suite, building number, etc.">
      </div>
      <div class="form-group">
        <label for="bill-city">City</label>
        <input type="text" class="form-control" id="bill-city"
        placeholder="City">
      </div>
      <div class="form-group">
        <label for="bill-state">State</label>
        <input type="text" class="form-control" id="bill-state"
        placeholder="State">
      </div>
    </div>
  </div>
</form>

Answer 1

这是可嵌套网格的美丽。结果并非真正内联，但我认为它更有效。

<div class="row">
    <div class="form-group col-sm-6">
        <label for="bill-city">City</label>
        <input type="text" class="form-control" id="bill-city" placeholder="City">
    </div>
    <div class="form-group col-sm-6">
        <label for="bill-state">State</label>
        <input type="text" class="form-control" id="bill-state" placeholder="State">
    </div>
</div>

Fiddle

请注意，这仅适用于sm及以上的屏幕宽度。您可以将课程更改为col-xs-6以便一直使用它。

在Bootstrap 3中以非内联形式内联表单元素？

1 个答案: