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/

我的问题是上面的代码是使用引导网格的宽度阈值与我的预期不符：<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-xs-12 div上添加col-md-。而您只在移动设备上居中，您可以使用一些媒体查询来实现这一目标。看起来像：

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

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

这是一个工作代码的链接：

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

Answer 2

检查 this example，使用 .text-center、.float-md-left 和 .float-md-right。

使用Boostrap调整大小时如何更改对齐？

2 个答案: