Span Icon выровнять в Bootstrap 3 datetimepicker - PullRequest
Новая
       25

Span Icon выровнять в Bootstrap 3 datetimepicker

0 голосов
/ 29 июня 2018

Я новичок в начальной загрузке 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>

Результат = = * enter image description here

Почему значок диапазона выровнен по правому краю? Как я могу это исправить? Это из-за "col-md-9"?

1 Ответ

0 голосов
/ 29 июня 2018

Я думаю, вы могли бы начать обучение с 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>

input-group с гипотетической фиксированной шириной 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>
...