Question

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

我想要所有控件，如位置，开始日期，结束日期等..在一行中，大于768px的屏幕和附加在start＆amp;末尾的日历图标end输入控件就像它在codepen上所示。

<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

＆＃13;

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

＆＃13;

Answer 2

首先我会删除输入类型类 input-sm 然后而不是span类 input-group-addon add-on 我会添加 input-group- btn 然后对于选择值使用form-group with 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>

Bootstrap图标未与输入对齐

2 个答案: