页脚布局无效

Question

我使用此Bootstrap作为页面页脚。 我希望<div>标记与类col-sm-3 myCols并排显示水平（如4列），当浏览器宽度小于“1136”时，它会像现在一样垂直。并且社交图标在版权部分上方连续显示。

#myFooter {
	background-color: #373a48;
	color:white;
}

#myFooter .footer-copyright{
	background-color: #383737;
	padding-top:3px;
	padding-bottom:3px;
	text-align: center;
}

#myFooter .footer-copyright p{
	margin:10px;
	color: #ccc;
}

#myFooter ul{
	list-style-type: none;
    padding-left: 0;
    line-height: 1.7;

}

#myFooter h5{
	font-size: 18px;
    color: white;
    font-weight: bold;
    margin-top: 30px;
}

#myFooter a{
	color:#d2d1d1;
	text-decoration: none;
}

#myFooter a:hover, #myFooter a:focus{
	text-decoration: none;
	color:white;
}

#myFooter .myCols{
	text-align: center;
}

#myFooter .social-networks{
	text-align: center;
	padding-top: 30px;
	padding-bottom: 38px;
}

#myFooter .social-networks a{
    font-size: 32px;
    margin-right: 5px;
    margin-left: 5px;
    color: #f9f9f9;
    padding: 10px;
    transition: 0.2s;
}

#myFooter .social-networks a:hover{
	text-decoration: none;

}

#myFooter .facebook:hover{
	color:#0077e2;
}

#myFooter .google:hover{
	color:#ef1a1a;
}

#myFooter .twitter:hover{
	color: #00aced;
}

@media screen and (max-width: 1136px){
	#myFooter {
		text-align: center;
	}
}

<footer id="myFooter">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 myCols">
                    <h5>Get started</h5>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Sign up</a></li>
                        <li><a href="#">Downloads</a></li>
                    </ul>
                </div>
                <div class="col-sm-3 myCols">
                    <h5>About us</h5>
                    <ul>
                        <li><a href="#">Company Information</a>                           </li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Reviews</a></li>
                    </ul>
                </div>
                <div class="col-sm-3 myCols">
                    <h5>Support</h5>
                    <ul>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Help desk</a></li>
                        <li><a href="#">Forums</a></li>
                    </ul>
                </div>
                <div class="col-sm-3 myCols">
                    <h5>Legal</h5>
                    <ul>
                        <li><a href="#">Terms of Service</a></li>
                        <li><a href="#">Terms of Use</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="social-networks">
            <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
            <a href="#" class="facebook"><i class="fa fa-facebook-official">
            </i></a>
            <a href="#" class="google"><i class="fa fa-google-plus"></i></a>
        </div>
        <div class="footer-copyright">
            <p>© 2016 Copyright Text </p>
        </div>
  </footer>

Answer 1

为#myFooter和行

使用flexbox

#myFooter {
  background-color: #373a48;
  color: white;
  display: flex;
  flex-wrap: wrap;
}

#myFooter .container {
  width: 100%;
}

#myFooter .row {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

#myFooter .footer-copyright {
  background-color: #383737;
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: center;
  width: 100%;
}

#myFooter .footer-copyright p {
  margin: 10px;
  color: #ccc;
}

#myFooter ul {
  list-style-type: none;
  padding-left: 0;
  line-height: 1.7;
}

#myFooter h5 {
  font-size: 18px;
  color: white;
  font-weight: bold;
  margin-top: 30px;
}

#myFooter a {
  color: #d2d1d1;
  text-decoration: none;
}

#myFooter a:hover,
#myFooter a:focus {
  text-decoration: none;
  color: white;
}

#myFooter .myCols {
  text-align: center;
  width: 25%;
}

#myFooter .social-networks {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 38px;
  width: 100%;
}

#myFooter .social-networks a {
  font-size: 32px;
  margin-right: 5px;
  margin-left: 5px;
  color: #f9f9f9;
  padding: 10px;
  transition: 0.2s;
}

#myFooter .social-networks a:hover {
  text-decoration: none;
}

#myFooter .facebook:hover {
  color: #0077e2;
}

#myFooter .google:hover {
  color: #ef1a1a;
}

#myFooter .twitter:hover {
  color: #00aced;
}

@media screen and (max-width: 1136px) {
  #myFooter {
    text-align: center;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<footer id="myFooter">
  <div class="container">
    <div class="row">
      <div class="col-sm-3 myCols">
        <h5>Get started</h5>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Sign up</a></li>
          <li><a href="#">Downloads</a></li>
        </ul>
      </div>
      <div class="col-sm-3 myCols">
        <h5>About us</h5>
        <ul>
          <li><a href="#">Company Information</a> </li>
          <li><a href="#">Contact us</a></li>
          <li><a href="#">Reviews</a></li>
        </ul>
      </div>
      <div class="col-sm-3 myCols">
        <h5>Support</h5>
        <ul>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Help desk</a></li>
          <li><a href="#">Forums</a></li>
        </ul>
      </div>
      <div class="col-sm-3 myCols">
        <h5>Legal</h5>
        <ul>
          <li><a href="#">Terms of Service</a></li>
          <li><a href="#">Terms of Use</a></li>
          <li><a href="#">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="social-networks">
    <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
    <a href="#" class="facebook"><i class="fa fa-facebook-official">
            </i></a>
    <a href="#" class="google"><i class="fa fa-google-plus"></i></a>
  </div>
  <div class="footer-copyright">
    <p>© 2016 Copyright Text </p>
  </div>
</footer>

Answer 2

在<div class="container-fluid">之前使用<div class="container">,，然后在底部关闭它。试试吧。