左对齐徽章

Posted 2021-04-07

我在这里创建了这张卡，其中我有一些徽章，但他们没有以正确的方式对齐我需要像这个image.左对齐它们。任何人都可以帮助我对齐这些徽章，就像它们在第二张图像中对齐一样吗？我正在使用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>

答案

你可以将你的标签包装在<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>

以上是关于左对齐徽章的主要内容，如果未能解决你的问题，请参考以下文章

离子徽章的垂直对齐

idea复制过来代码固定左对齐怎么调回来、

div+css如何左对齐？

h5 代码实现左对齐

如何将所有源代码向左对齐？

如何在Latex中插入伪代码