twitter-bootstrap-3 - 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>

结果是 =>

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

标签： twitter-bootstrap-3alignmentdatetimepicker

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 的 input-group 解决方案

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