なぜ私のボタンはコンテナ内に含まれていません

Question

親コンテナのサイズに影響しない3つのボタンがあり、その理由を特定できません。

は私はここCreative Tim Material Kit

から未改変されたブートストラップCSSおよび要素を使用している

<div class="normal-body main-raised"> 
    <div class="section section-basic"> 
     <div class="jumbotron jumbotron-fluid"> 
      <div class="container-fluid text-center"> 
       <h1 class="text-xs-center">Welcome to the Employee Portal</h1> 
      </div> 
     </div> 

     <div class="container-fluid col-xs-8 col-xs-offset-2 text-xs-center"> 
      <div class="row"> 
       <h2>Useful Links</h2> 
      </div> 
      <div class="row"> 
       <button class="btn btn-primary btn-raised"><%= link_to "Locations", locations_path, class: "text-white" %></button> 
       <button class="btn btn-primary btn-raised"><%= link_to "Employees", fetch_employees_path, class: "text-white" %></button> 
       <button class="btn btn-primary btn-raised"><%= link_to "Timecards", timecards_path, class: "text-white" %></button> 
      </div> 
     </div> 
    </div> 
</div> 

HTMLはFiddleある（完璧ではないが、両端の点を取得）

...あなたがそれを見たい場合は、button cssです。

.btn.btn-raised:not(.btn-link), .btn-group-raised .btn:not(.btn-link), .input-group-btn .btn.btn-raised:not(.btn-link), .btn-group-raised .input-group-btn .btn:not(.btn-link) { 
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); 
} 
.btn.btn-raised.btn-primary, .btn.btn-fab.btn-primary, .btn-group-raised .btn.btn-primary, .input-group-btn .btn.btn-raised.btn-primary, .input-group-btn .btn.btn-fab.btn-primary, .btn-group-raised .input-group-btn .btn.btn-primary { 
    background-color: #9c27b0; 
    color: #ffffff; 
} 
.btn.btn-raised, .btn.btn-raised.btn-default, .btn.btn-fab, .btn.btn-fab.btn-default, .btn-group-raised .btn, .btn-group-raised .btn.btn-default, .input-group-btn .btn.btn-raised, .input-group-btn .btn.btn-raised.btn-default, .input-group-btn .btn.btn-fab, .input-group-btn .btn.btn-fab.btn-default, .btn-group-raised .input-group-btn .btn, .btn-group-raised .input-group-btn .btn.btn-default { 
    background-color: #EEEEEE; 
    color: rgba(0, 0, 0, 0.87); 
} 
.btn, .input-group-btn .btn { 
    border: none; 
    border-radius: 3px; 
    position: relative; 
    padding: 12px 30px; 
    margin: 10px 1px; 
    font-size: 12px; 
    font-weight: 400; 
    text-transform: uppercase; 
    letter-spacing: 0; 
    will-change: box-shadow, transform; 
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    background: transparent; 
} 
.btn-primary { 
    color: #fff; 
    background-color: #0275d8; 
    border-color: #0275d8; 
} 
.btn { 
    display: inline-block; 
    font-weight: normal; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    user-select: none; 
    border: 1px solid transparent; 
    padding: 0.375rem 1rem; 
    font-size: 1rem; 
    line-height: 1.5; 
    border-radius: 0.25rem; 
} 

Answer 1

マークアップが少しずれているためです。 containerにはcol-xsと同じクラスを使用しないでください。container>row>col-xs-8のようになります。

こちらを参照してください - http://jsfiddle.net/qE9kJ/361/

Answer 2

を、このクラスのセクションセクション-基本」を見つける...あなたはそこにフロート

<div class="section section-basic"> 
 
    
 
    <!--Your code--> 
 
    </div> 
 
    <!--just add this line--> 
 
    <div style="clear:both;"></div>