Question

我有三个选择框横向出生日期三个选择是这样的 Month - Day - Year所以我找到了一种应该响应的方式。有没有可以帮助我的bootstrap课程？我使用的是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

我认为您可以更好地将表单元素放入col-*-*装饰的DIV中：

<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>

在这种情况下，您基本上需要三列，因此我在row DIV中添加了col-lg-8 col-md-8 col-sm-8 col-xs-12元素，并将表单元素放入col-xs-4 DIV中，将这些元素放入三列

Answer 2

<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>

如何使三个选择框与引导程序一致

2 个答案: