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

Question

我正在尝试建立一个带闪存卡的网站，以帮助学习希伯来语字母表。我的Card部分视图如下所示：

@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对布局有任何影响。

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;