html - 为什么 BootStrap 列偏移不起作用？

Question

我正在尝试建立一个带有抽认卡的网站来帮助学习希伯来语字母表。我的 Card 部分 View 如下所示:

@model FlashCards.MultipleChoice.ViewModels.CardViewModel

<div class="index-card">
    <div class="row">
        <div class="col-md-offset-5"></div>
        <div class="col-md-2 text-center">
            @Model.Numeric
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-2"></div>
        <div class="col-md-8 text-center card-symbol">
            @Html.Raw(Model.UnicodeEscape)
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-2"></div>
        <div class="col-md-8 text-center">
            @Model.Name
        </div>
    </div>
</div>

现在 col-md-offset 适用于除第一行以外的所有行，导致卡片呈现如下图所示:

现在为什么图像中的 1 不像字形和字母 Aleph 的名称那样偏移？

到目前为止，我的这些卡片的 CSS 文件仅包含以下内容:

.index-card {
    height: 150px;
}

    .index-card .card-symbol {
        font-size: large
    }

Answer 1

我相信您错误地使用了偏移量类；不要将它们应用于空的 div。

您的文字居中。第二行和第三行的宽度为 8 列。看起来偏移量有效，但实际上无效。第一行只有 2 列宽。您的偏移 div 均未对布局产生任何影响。

你至少需要做这样的事情:

<div class="index-card">
  <div class="row">
    <div class="col-md-offset-5 col-md-2 text-center">
      @Model.Numeric
    </div>
  </div>
  <div class="row">
    <div class="col-md-offset-2 col-md-8 text-center card-symbol">
      @Html.Raw(Model.UnicodeEscape)
    </div>
  </div>
  <div class="row">
    <div class="col-md-offset-2 col-md-8 text-center">
      @Model.Name
    </div>
  </div>
</div>