html - Bootstrap 图标与输入不对齐

Question

我正在处理日期范围控件，我想在输入框的末尾附加图标，但它显示在新行中。

对于大于 768 像素的屏幕，我希望所有控件(如位置、开始日期、结束日期等)在一行中，并且日历图标附加在 start 和 end 的末尾> 输入控件就像在 codepen 上显示的那样。

示例:http://codepen.io/anon/pen/pggjax

<div class="row">
  <div class="input-daterange input-group" id="datepicker">
    <div class="form-group">

      <div class="col-xs-2">
        <label>Location One </label>
        <select id="location1">
          <option value="1 ">Value1</option>
        </select>
      </div>
      <div class="col-xs-2">
        <label>Location Two </label>
        <select id="location2">
          <option value="1 ">Value1</option>
        </select>
      </div>

      <div class="col-xs-4 ">
        <label>Start </label>
        <input type="text " class="input-sm form-control " name="start " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
      </div>

      <div class="col-xs-4 ">
        <label>End </label>
        <input type="text " class="input-sm form-control " name="start " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
      </div>

      <div class="col-xs-2">
        <button name="submit">SUBMIT</button>
      </div>

    </div>
  </div>
</div>

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="input-daterange input-group" id="datepicker">
    <div class="form-group">

      <div class=" col-md-2 col-xs-12">
        <label>Location One </label>
        <select id="location1">
          <option value="1 ">Value1</option>
        </select>
      </div>
      <div class="col-md-2 col-xs-12">
        <label>Location Two </label>
        <select id="location2">
          <option value="1 ">Value1</option>
        </select>
      </div>

      <div class="col-md-3 col-xs-12 ">
        <div class="input-group">
  <input type="text" class="form-control" placeholder="Start Date" aria-describedby="basic-addon2">
  <span class="input-group-addon glyphicon glyphicon-calendar"  id="basic-addon2"></span>
</div>
      </div>

      <div class=" col-md-3 col-xs-12">
             <div class="input-group">
  <input type="text" class="form-control" placeholder="end Date" aria-describedby="basic-addon2">
  <span class="input-group-addon glyphicon glyphicon-calendar"  id="basic-addon2"></span>
</div>
       <!-- <label>End </label>
        <input type="text " class="input-sm form-control " name="start " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>-->
      </div>

      <div class="col-md-2 col-xs-12">
        <button name="submit">SUBMIT</button>
      </div>

    </div>
  </div>
</div>


<p></p>
<p>
  Example
  <div class="form-group ">
    <label class="col-xs-3 control-label ">Date</label>
    <div class="col-xs-5 date ">
      <div class="input-group input-append date " id="dateRangePicker ">
        <input type="text " class="form-control " name="date " />
        <span class="input-group-addon add-on "><span class="glyphicon glyphicon-calendar "></span></span>
      </div>
    </div>
  </div>
</p>