html - 页脚中的内容不响应 Bootstrap 网格

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