Question

我无法弄清楚如何在联系我按钮下将社交媒体图标放在页脚中间，并使整个页脚粘在底部而没有lorem ipsum文本。请帮忙

下面是页脚代码：

<div class="container">
          <footer class="bg-dark">
            <div class="row">
              <a href="#" class="btn btn-info mx-auto">Contact Me</a>
            </div>
            <div class="row mt-3 social">
              <i class="fa fa-twitter" aria-hidden="true"></i>
              <i class="fa fa-facebook" aria-hidden="true"></i>
              <i class="fa fa-linkedin" aria-hidden="true"></i>
              <i class="fa fa-instagram" aria-hidden="true"></i>
              <i class="fa fa-pinterest-p" aria-hidden="true"></i>
            </div>
          </footer>
        </div>

.footer {
  height: 100px;
}

.social {

  width: 50%;
  display: inline-block;

}

Answer 1

使用text-center类。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <footer class="bg-dark">
    <div class="row">
      <div class='col-md-4 text-center'>
      <a href="#" class="btn btn-info mx-auto">Contact Me</a>
      </div>
    </div>
    <div class="row col-md-4 text-center">
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <i class="fa fa-facebook" aria-hidden="true"></i>
      <i class="fa fa-linkedin" aria-hidden="true"></i>
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-pinterest-p" aria-hidden="true"></i>
    </div>
  </footer>
</div>

将社交媒体图标定位在页脚div中间

1 个答案: