html - 使用 Bootstrap 调整大小时如何更改对齐方式？

Question

我在下面使用 Bootstrap 有以下页脚:

.align-center {
  text-align: center;
}

#footer {
  background-color: #3c3d41;
  color: white;
  padding-top: 25px;
  padding-bottom: 10px;
}

.footer-social-media-text {
  text-decoration: none;
  height: 25px;
  color: white;
  white-space: nowrap;
}

.footer-social-media-icon {
  padding-right: 8px;
  margin-left: 30px;
  margin-right: 2px;
  font-weight: bold;
  height: 25px;
  color: white;
}

#footer a {
  -o-transition: .25s;
  -ms-transition: .25s;
  -moz-transition: .25s;
  -webkit-transition: .25s;
  transition: .25s;
}

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

<link href="https://maxcdn.bootstrapcdn.com/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"/>

<footer id="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <a href="https://www.mycompany.com/" class="footer-social-media-text">
          <i class="fa fa-home fa-2x social footer-social-media-icon"></i> My Company
        </a>
      </div>
      <div class="col-md-9">
        <a href="https://www.facebook.com" class="footer-social-media-text pull-right">
          <i class="fa fa-facebook fa-2x social footer-social-media-icon"></i> Facebook
        </a>
        <a href="https://www.instagram.com" class="footer-social-media-text pull-right">
          <i class="fa fa-instagram fa-2x social footer-social-media-icon"></i> Instagram
        </a>
        <a href="https://twitter.com" class="footer-social-media-text pull-right">
          <i class="fa fa-twitter fa-2x social footer-social-media-icon"></i> Twitter
        </a>
      </div>
    </div>
    <hr />
    <p class="align-center">© 2017 My Company</p>
  </div>
</footer>

</div>

</div>

https://jsfiddle.net/coyagf2b/

我的问题是上面的代码是使用 Bootstrap 网格的宽度阈值与我的预期不符:<div class="col-md-3">和 <div class="col-md-9"> .

基本上我想:

• 当页面宽度大幅减小时，将右侧部分堆叠在左侧部分下方我尝试了不同的 col-md-x/col-lg-x/col-sm-x没有太大的结果......
• 当右边的部分在下面堆叠时，将两个部分的内容对齐方式改为居中

我该怎么做？

Answer 1

Bootstrap 的 col-xs- 类可以完美地找到您的代码。如果您希望右栏位于左下方，那么我只需在您拥有的每个 col-md- div 上添加 col-xs-12。而且你只关注移动设备，你可以使用一些媒体查询来实现这一点。看起来像:

@media (max-width: 991px){
  .centerSection{
    text-align:center;
  }
}

@media (min-width: 992px){
  .rightSection {
    float:right;
  }
} 

这里是一个工作代码笔的链接:

https://codepen.io/egerrard/pen/rGrPmM