フットボールのコンテンツがブーストストラップグリッドに反応しない

Question

私は楽しいためにウェブサイトを再設計しています。私はフッターに3列3列に分かれたいくつかのコンテンツを持っています。ただし、コンテンツは同じ行に配置されていません。すべてのコンテンツは引き続きプッシュダウンされます。ここで

はHTMLである：ここでは

<footer class="footy"> 
    <div class="container-fluid"> 
    <div class="row"> 
    <div class="col-4-xs"> 
    <h4 class="about_us"> About Us </h4> 
     </div> 
     <div class="col-4-xs"> 
    <h4 class="account text-center"> My Account </h4> 
     </div> 
     <div class="col-4-xs"> 
    <h4 class="follow"> Follow US </h4> 
     </div> 
    </div> 
    <hr> 
    <div class="row"> 
    <p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.<a href="https://www.dynamikmuscle.com/#">click to read more</a></p> 
    </div> 
    <div class="row"> 
    <div class="col-4-xs"> 
<ul class="reach_out"> 
    <li> Content </li> 
<li> Content </li> 
<li> Content </li> 
    </ul> 
    </div> 
    <div class="col-4-xs"> 
     <ul class="links text-center"> 
    <li> Content </li> 
<li> Content </li> 
<li>Content </li> 
    </ul> 
    </div> 
    <div class="col-4-xs"> 
     <ul class="social"> 
    <li> Content </li> 
<li> Content </li> 
<li>Content </li> 
    </ul> 
    </div> 
    </div> 
    </div> 
</footer> 

はCSSです：

.footy{ 
    color: white; 
    background: black; 
    height:140px; 
    width: 100%; 
} 
.about_info{ 
    width: 30%; 
    float: left; 
    font-size: 14px; 
    margin-left: 30px; 
} 
.about_us{ 
    margin-left: 30px; 
    margin-top: 30px; 
} 
.reach_out{ 
margin-left: 30px; 
} 
.account{ 
    margin-left: 
} 
.follow{ 
    float: right; 
    margin-right: 30px; 
    display: inline-block; 
} 
.social{ 
    float: right; 
} 

実際のコードがcodepenで見ることができます：http://codepen.io/sibraza/pen/wWgqBO

Answer 1

クラス名が間違っているあなたが使用する必要がありますcol-xs-4の代わりにcol-4-xs