Html 引导向右拉向左拉以移动设备为中心

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

代码（）：

由谷歌提供动力。
|




请将所有查询转到admin@gmail.com
2.1

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

我希望能够在移动设备上以类似的方式显示它，它位于中心位置：

将

列-***

div包装在

行中

我认为您不需要

向左拉

和

向右拉

类。添加

col-sm-push-4

类以使右div移动到页面的右边框

将自定义css添加到移动设备上的中心内容，如下所示：

@介质（最大宽度：767px）{
.col-sm-4{
文本对齐：居中；
}
}

或者，如果您不希望其他

.col-sm-4

div具有居中的内容，可以向这些div添加自定义类

---

您需要使用查询媒体来实现这一点，因为当结果以小分辨率向右拖动时。它会反应灵敏，并下降到底部。您可以使用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 query来控制这些内容：并且您有一个错误的引导结构，您需要通过

行包装
列xx
 <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;
    }
}