Значки выравнивания слева - PullRequest
Новая
       21

Значки выравнивания слева

0 голосов
/ 05 сентября 2018

Я создал эту карту здесь Picture, в которой у меня есть несколько значков, но они не выровнены правильно, мне нужно выровнять их по левому краю, как на этом изображении. enter image description here. Может ли кто-нибудь помочь мне в выравнивании этих значков так же, как они выровнены на втором изображении? Я использую загрузчик 3.3.7, и это всего лишь небольшой фрагмент кода, и я думаю, что этого достаточно.

вот HTML-код. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-sm-6">
  <div class="card main-content">
    <div class="row clearfix" id="line">
      <div class="col-sm-12">
        <div class="header">
          <h2>
            Insights
          </h2>
        </div>
        <div class="modal-body">
          <div class="row clearfix">
            <div class="col-sm-12" style="display: table;">
              <div>
                Total Students
                <span class="badge badge-primary">
                                            0
                                        </span>
              </div>
              <br>
              <div>
                Subjects
                <span class="badge badge-primary">
                                            20
                                        </span>
              </div>
              <br>
              <div>
                Sections
                <span class="badge badge-primary">
                                            289
                                        </span>
              </div>
              <br>
              <div>
                Created On
                <span class="badge">
                                            27/8/2018
                                        </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 05 сентября 2018

Вы можете обернуть свои ярлыки в тег <span> и присвоить ему min-width. Таким образом, значки будут выровнены по горизонтали влево и вертикально на одной линии: 

.insight-label {
  display: inline-block;
  min-width: 120px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
  <div class="card main-content">
    <div class="row clearfix" id="line">
      <div class="col-sm-12">
        <div class="header">
          <h2>Insights</h2>
        </div>
        <div class="modal-body">
          <div class="row clearfix">
            <div class="col-sm-12" style="display: table;">
              <div>
                <span class="insight-label">Total Students</span>
                <span class="badge badge-primary">0</span>
              </div>
              <br>
              <div>
                <span class="insight-label">Subjects</span>
                <span class="badge badge-primary">20</span>
              </div>
              <br>
              <div>
                <span class="insight-label">Sections</span>
                <span class="badge badge-primary">289</span>
              </div>
              <br>
              <div>
                <span class="insight-label">Created On</span>
                <span class="badge">27/8/2018</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
...