跨度图标在Bootstrap 3 datetimepicker中对齐

Question

我是Bootstrap 3的新手，我开始尝试学习。现在我面临着对齐问题。

<div class="row">
    <div class="col-md-3">
        <label>Date</label>
    </div>
    <div class="col-md-9">
        <div class="form-group" style="margin-bottom:0px;">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

结果是=>

为什么span图标正确对齐？我怎样才能解决这个问题？是因为"col-md-9"吗？

Answer 1

我认为您可以从Bootstrap v3.3.7或Bootstrap v4.1.1开始学习，同样，该指南对Bootstrap 3 Datepicker很有帮助

我希望这会有所帮助：

通用响应式解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <!-- use the related col class according with your needs eg. col-xs-6 col-sm-4 col-md-3 col-lg-2 -->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
      <div class="form-group">
        <!-- Some inline style for the label -->
        <label style="float: left; padding-top: 5px; margin-right: 20px">Date</label>
        <div class="input-group date" id="datetimepicker1">
          <input type="text" class="form-control" />
          <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>

  </div>
</div>

输入组，其假设固定宽度为200px解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="form-group">
      <!-- Some inline style for the label -->
      <label style="float: left; padding-top: 5px; margin-right: 20px">Date</label>
      <!-- input-group with an hypothetical fixed width of 200px -->
      <div class="input-group date" style="width: 200px;" id="datetimepicker1">
        <input type="text" class="form-control" />
        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>