Bootstrap pull-right-pull-left 以移动设备为中心答案

【问题标题】：Bootstrap pull-right pull-left centering on mobile devicesBootstrap pull-right-pull-left 以移动设备为中心
【发布时间】：2016-05-12 08:16:00
【问题描述】：

我在使用向左拉和向右拉然后在移动设备上居中制作页脚时遇到问题。目前在桌面上显示正常。

代码(fiddle)：

<footer >
<div class="container">
    <p>
      <div class="col-sm-4 pull-left">
          <strong>Powered by Google</strong>.
      </div>
      <div class="col-sm-4 pull-right">
          <a href="" title="Terms" target="_blank">Terms</a>
          <span class="">|</span>
          <a href="" title="Policy" target="_blank">Policy</a>
      </div>
    </p>
    <BR>
    <p>
        <div class="col-sm-4 pull-left">
            Please direct all queries to admin@gmail.com
        </div>
        <div class="col-sm-4 pull-right">
            2.1
        </div>
    </p>

</div>

您可以在移动设备上看到它显示为：

我希望能够在它居中的移动设备上以类似的方式显示它：

【问题讨论】：

您所显示的所需输出是完全不同的内容？
你需要使用@media查询来控制这些东西：jsfiddle.net/1gLmb0yy/5
你有错误的引导结构，你需要用col-xx-xx包装row

标签： html css twitter-bootstrap

【解决方案1】：

将col-*** div 包装在.row div 中。
我认为你不需要pull-left 和pull-right 类。添加col-sm-push-4类使右div移动到页面右边框
添加自定义 css 以使移动设备上的内容居中，如下所示：

@media (max-width: 767px) { .col-sm-4 { text-align: center; } }

如果您不希望其他 .col-sm-4 div 具有居中的内容，或者向这些 div 添加自定义类。

https://jsfiddle.net/1gLmb0yy/6/

【讨论】：

【解决方案2】：

您需要使用查询媒体来执行此操作，因为当结果以小分辨率向右拉时。它会响应并触底。您可以使用 F12 开发人员工具来查看。

 <footer >
        <div class="container">
              <div class="col-sm-4 row">
                  <strong>Powered by Google</strong>.
                  Please direct all queries to admin@gmail.com
              </div>
              <div class="col-sm-4 row pull-right">
                  <a href="" title="Terms" target="_blank">Terms</a>
                  <span class="">|</span>
                  <a href="" title="Policy" target="_blank">Policy</a>
                  2.1 
              <div/>
             </div>
             </div>
     <footer>

开发者工具结果。

媒体查询示例

  @media (max-width: 767px) {

      .col-sm-6.row.pull-right {
    position: relative;
    top: -15px;
    }
}

【讨论】：