頁腳中的內容未響應Boostrap網格

Question

我正在重新設計一個有趣的網站。我在頁腳中有一些內容分成三列，三列。但是，內容並沒有被放在同一條線上。所有內容不斷下降。

下面是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