左对齐徽章

Question

我在处创建了这张卡片，其中有一些徽章，但是它们没有以正确的方式对齐，因此需要像这样的图像将它们左对齐。。谁能帮助我对齐这些徽章，就像它们在第二张图片中对齐一样？我正在使用bootstrap 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>

Answer 1

您可以将标签包裹在<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>