引导图标未与输入对齐

Question

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

我想要所有控件，如位置、开始日期、结束日期等。在一行中，屏幕大于 768 像素，日历图标附加在start 和end 输入控件的末尾，如图所示代码笔。

示例：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>

Answer 2

首先我会删除输入类型类 input-sm 然后我会添加 input-group- 而不是 span 类 input-group-addon add-on btn 然后对于选择值使用 form-group 和 class form-control

        <div class="row">
            <div class="input-daterange input-group" id="datepicker">
                <div class="form-group">
                    <div class="col-xs-2">
                        <div class="form-group">
                            <label for="location1">Location One</label>
                            <select class="form-control" id="location1">
                                <option value="1">Value1</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xs-2">
                        <div class="form-group">
                            <label for="location2">Location Two</label>
                            <select class="form-control" id="location2">
                                <option value="1">Value1</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-xs-3">
                        <label>Start </label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="start ">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>
                        </div>
                    </div>

                    <div class="col-xs-3">
                        <label>End </label>
                        <div class="input-group">
                            <input type="text" class=" form-control" name="start ">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </button>
                    </span>
                        </div>
                    </div>

                    <div class="col-xs-2 btn-group-vertical">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </div>
            </div>
        </div>