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

页脚中的内容不响应Boostrap网格

1 个答案: