Question

我在向左拉动和向右拉动制作页脚时出现问题，然后以移动设备为中心。目前在桌面上正常显示。

码（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>

正如您在移动设备上看到的那样，它显示为：

我希望能够在移动设备上显示与此类似的内容：

Answer 1

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

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

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

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

Answer 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;
    }
}

Bootstrap右拉左拉中心在移动设备上

2 个答案: