html - .form-control 类上的 Bootstrap 3 : How to use . col 类

Question

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

我如何确保它使用 50% 的 .col-md-6 宽度而不是 100% 的 .form-control 宽度？

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

您需要在 col-sm-8 列中包含另一个 .row 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更多示例。