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

Question

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

我如何确保它使用.col-md-650%的.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文档.