Bootstrap 3：如何在.form-control类上使用.col类

Question

我有一个在表单元素上使用.form-control类的表单。我想并排显示两个输入，所以我在每个输入上都使用.col-md-6，但由于它们已经有.form-control类，.col-md-6生成的宽度被覆盖了.form-control上课。

如何确保.col-md-6宽度为50％，而.form-control宽度为100％？

HTML

<form id="user-edit-account" data-toggle="validator" class="form-horizontal">
    <h4>Account Settings</h4>
    <div class="form-group">
        <label for="user-profile-name" class="control-label col-sm-4">Location*</label>
        <div class="col-sm-8">
            <select id="profile-country" class="form-control col-md-6" name="country">
                <option value="">Please select a destination</option>
                <option value="India">India</option>
                <option value="China">China</option>
                <option value="Asia">Asia</option>
            </select>
            <input type="text" class="form-control col-md-6" id="profile-region" placeholder="City" value="">
        </div>
    </div>
</form

Answer 1

您需要在.row列中添加另一个col-sm-8 div，并使用列div围绕每个表单控件。由于.form-control指定宽度为100％，因此它们将扩展到其父容器的宽度。使表单控件周围的列允许这种情况发生。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form id="user-edit-account" data-toggle="validator" class="form-horizontal">
    <h4>Account Settings</h4>
    <div class="form-group">
      <label for="user-profile-name" class="control-label col-sm-4">Location*</label>
      <div class="col-sm-8">
        <div class="row">
          <div class="col-xs-6">
            <select id="profile-country" class="form-control" name="country">
              <option value="">Please select a destination</option>
              <option value="India">India</option>
              <option value="China">China</option>
              <option value="Asia">Asia</option>
            </select>
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control" id="profile-region" placeholder="City" value="">
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

有关更多示例，请参阅Bootstrap Docs。

Answer 2

我猜你需要自定义宽度的表格。此外，您还需要使用.form-inline。

来自Bootstrap：

  

可能需要自定义宽度

     

输入和选择的宽度为：100％;默认情况下在Bootstrap中应用。在内联表单中，我们将其重置为width：auto;所以多个控件可以驻留在同一行上。根据您的布局，可能需要额外的自定义宽度。