如何使三个 select 框内嵌 bootstrap

Question

我有三个select横排的生日框三个select是这样的 Month - Day - Year所以我正在寻找一种响应方式。有什么 bootstrap class 可以帮助我吗？我正在使用 form-control 但它需要 100% 容器宽度。

<div class="form-group">
    <label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12">Pet's Date of Birth:</label>
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">       
          <select id="dob_month" class="form-control col-lg-4 col-md-4 col-sm-4 col-xs-4" name="dob_month">
      <?= $dob_month; ?>
       </select>
       <select id="dob_day" class="form-control" name="dob_day" >
        <?= $dob_day; ?>
         </select>
     <select id="dob_year" class="form-control" name="dob_year">
        <?= $dob_year; ?>
     </select>     
    </div>
</div>

Answer 1

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group connected-group">
  <label class="control-label">
    Date of Birth <span class="symbol required"></span>
  </label>
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4">
      <select name="dd" id="dd" class="form-control">
        <option value="">DD</option>
      </select>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4">
      <select name="mm" id="mm" class="form-control">
        <option value="">MM</option>
      </select>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4">
      <select name="mm" id="mm" class="form-control">
        <option value="">YYYY</option>
      </select>
    </div>
  </div>
</div>

Answer 2

我认为将表单元素放入 col-*-* decorated DIVs:

中可能会更成功

<div class="form-group">
  <label class="control-label col-lg-3 col-md-4 col-sm-4 col-xs-12">Pet's Date of Birth:</label>
    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">      
      <div class="row"> <!-- added div.row -->
        <div class="col-xs-4"> <!-- added div.col-xs-4 -->
          <select id="dob_month" class="form-control" name="dob_month">
            <?= $dob_month; ?>
          </select>
        </div>
        <div class="col-xs-4"> <!-- added div.col-xs-4 -->
          <select id="dob_day" class="form-control" name="dob_day" >
            <?= $dob_day; ?>
          </select>
        </div>
        <div class="col-xs-4"> <!-- added div.col-xs-4 -->
          <select id="dob_year" class="form-control" name="dob_year">
            <?= $dob_year; ?>
          </select>
        </div>
      </div>
    </div>
</div>
</div>

在这种情况下，您基本上需要三列，所以我在 col-lg-8 col-md-8 col-sm-8 col-xs-12 DIV 中添加了一个 row 元素，并将表单元素放入 col-xs-4 DIVs 将它们分成三列。

如何使三个 select 框内嵌 bootstrap

How to make three select boxes in-line with bootstrap

html

css

responsive-design

twitter-bootstrap-3