ブートストラップ部門は中心にいません

Question

私はセントラルボックスでブートストラップサイトをやっていますが、私のコンテナはすべて中央にはなく、ページの左側にあります。理由はわかりません。私はちょうどオフセットを試みたが、うまくいきません。

my pen on codepen

<div class="container-fluid"> 
 
    
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <h1 class="text-center"><span class="title">title</span> 
 
     <i class="fa fa-twitch fa-2x" aria-hidden="true"></i> 
 
     <span class="subt">subtitle</span></h1> 
 
     </div> 
 
     
 
    </div> 
 
     
 
    </div> <!--close h1 container--> 
 
    
 
    <div class="container box"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
<div class="container status"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3 col"> 
 
     
 
     <div class="btn-group btn-group-justified" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-success">Online</button> 
 
    <button type="button" class="btn btn-warning">Offline</button> 
 
    <button type="button" class="btn btn-default">All</button> 
 
</div> <!--btn group--> 
 
    
 
     
 
     
 
    </div> 
 
    </div> 
 
    </div><!--close container status--> 
 
    
 
     </div> 
 
     </div> 
 
    </div><!--container box--> 
 
    
 
     </div><!--close container fluid-->

Answer 1

ブートストラップ4は、オフセットのため、わずかに異なる構文を使用しています。

col-md-offset-3はoffset-md-3

Updated CodePen

Answer 2

コンテナが巣-ことができませんになります。代わりにコンテナを順番に使用してください。

ブートストラップ4 CSSを読み込むと、オフセットにブートストラップ4構文を使用します。 Boostrap 3 CSSをロードします。

offset-md-3

ブートストラップ3とブートストラップ4ドキュメントhttp://getbootstrap.com https://v4-alpha.getbootstrap.com