页脚社交图标不会对齐

Question

我正在尝试安排我的社交图标，以便他们将放置在同一水平上的一些文本在页脚。我将提供页脚的Photo，我到目前为止，以及html和css代码，我已经到目前为止。我想知道我是否需要将社交图标放到另一个div中，这样我就可以控制位置了，或者我需要在这里使用position元素吗？

​

footer {
  background: #212529;
  color: white;
  width: calc(100% - 80px);
  margin-left: 80px;
  margin-right: -15px;
}

footer a {
  color: #fff;
  font-size: 14px;
  transition-duration: 0.2s;
}

footer a:hover {
  color: #FA944B;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}


/* Footer social icons */

ul.social-network {
  list-style: none;
  display: inline;
  margin-left: 0 !important;
  padding: 0;
}

ul.social-network li {
  display: inline;
  margin: 0 5px;
}

.social-network a.icoFacebook:hover {
  background-color: #3B5998;
}

.social-network a.icoLinkedin:hover {
  background-color: #007bb7;
}

.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
  color: #fff;
}

.social-network a.socialIcon:hover,
.socialHoverClass {
  color: #44BCDD;
}

.social-circle li a {
  display: inline-block;
  position: relative;
  margin: 0 auto 0 auto;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.social-circle li i {
  margin: 0;
  line-height: 30px;
  text-align: center;
}

.social-circle li a:hover i,
.triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}

.social-circle i {
  color: #595959;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

.social-network a {
  background-color: #F9F9F9;
}

<footer class="mainfooter" role="contentinfo">
  <div class="footer-middle">
    <div class="container">
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <!--Column1-->
          <div class="footer-pad">
            <h4>ACTIVITÉS</h4>
            <ul class="list-styled">
              <li>
                <a href="#"></a>Rafting</li>
              <li><a href="#">Kayak</a></li>
              <li><a href="#">Parachute</a></li>
              <li><a href="#">Soufflerie</a></li>
              <li><a href="#">Saut élastique</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-3 col-sm-6">
          <!--Column1-->
          <div class="footer-pad">
            <h4>INFORMATIONS</h4>
            <ul class="list-unstyled">
              <li><a href="#">Mentions légales</a></li>
              <li><a href="#">À Propos de nous</a></li>
              <li><a href="#">CGV</a></li>
              <li><a href="#">CGU</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-3 col-sm-6">
          <!--Column1-->
          <div class="footer-pad">
            <h4>OFFRES</h4>
            <ul class="list-unstyled">
              <li><a href="#">Solo</a></li>
              <li><a href="#">Groupe</a></li>
              <li><a href="#">Famille</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-3 col-sm-6">
          <!--Column1-->
          <div class="footer-pad">
            <h4>PARTENAIRES</h4>
            <ul class="list-unstyled">
              <li><a href="#">Nos Partenaires</a></li>
              <li><a href="#">Devenir Partenaire</a></li>
            </ul>
          </div>
        </div>

        <div class="col-md-3">
          <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>
          </ul>
          <h4>Suivez-Nous</h4>
        </div>
      </div>

      <div class="row">
        <div class="col-md-12 copy">
          <p class="text-center">&copy; Copyright 2018 - Company Name. All rights reserved.</p>
        </div>
      </div>


    </div>
  </div>
</footer>

​

Answer 1

将CSS添加到<h4>Suivez-Nous</h4> h4{ display:inline }"并更改顺序

Answer 2

您可以将d-flex类添加到.col-md-3元素中，这样<h4>元素和社交图标就会排成一行。

附注:我已将.col-md-3更改为.col-md-6，导致在.col-md-3中图标开始换行到多行

<div class="col-md-6 d-flex">
          <h4>Suivez-Nous</h4>
        
          <ul class="social-network social-circle">
            <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li>
            <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#" class="icoInstagram" title="Instagram"><i class="fa fa-instagram"></i></a></li>
          </ul>
          
        </div>

完整代码：https://jsfiddle.net/8pL49rs7/