BootStrap列のオフセットが機能しないのはなぜですか？

Question

私はヘブライ語のアルファベットを覚えるのに役立つフラッシュカードを持つウェブサイトを構築しようとしています。最初の行以外のすべての今col-md-offset作品、下の画像のようにレンダリングするためにカードを引き起こして

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

：

今

理由をISN」マイCard部分図は、このようになります文字のAlephの名前とグリフのようにオフセットされた画像内の1？

これらのカードの私のCSSファイルは、これまでに次のものが含まれます。

.index-card { 
    height: 150px; 
} 

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

Answer 1

私はあなたが間違ったオフセットのクラスを使用していると考えています。空のdivには適用しないでください。

テキストが中央に配置されています。 2番目と3番目の行の幅は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>