Twitter bootstrap 基于网格大小的引导3页脚文本对齐

我不熟悉Bootstrap，从v3开始。我试图找出是否有一种方法可以根据网格大小改变文本或图像的对齐方式

我正在设计一个页脚，它有三列。左列的内容是左对齐的。中心列的内容在其列中居中。右列的内容是右对齐的。这使得除手机显示器外的所有显示器尺寸上都有一个平衡、美观的页脚。在一个手机超小的网格上，我希望这三列能够堆叠起来，并使所有内容居中，即使一些内容在较大的显示尺寸下是左对齐或右对齐的。现在在我的设计中，它们是堆叠的，但是L-C-R对齐方式让它看起来很糟糕

---

有没有一种方法可以做到这一点，通过有效的网格大小改变文本的对齐方式？请假设我可能只是没有一个基本的了解一些东西，因为我是如此新的引导，并不是一个超级有经验的CSS的人。我一边学习一边混日子。

这可以通过使用Bootstrap中现有的媒体查询来完成。由于v.3首先是移动版，所以我会先将所有内容置于中心位置，然后在下一个更大的媒体查询768中将样式添加到需要左右对齐的元素中。我也对您的代码进行了一些编辑：

HTML

---

这可以通过使用引导中的现有媒体查询来完成。由于v.3首先是移动版，所以我会先将所有内容置于中心位置，然后在下一个更大的媒体查询768中将样式添加到需要左右对齐的元素中。我也对您的代码进行了一些编辑：

HTML

---

@漂浮-这是JSFIDLE，希望我做得正确-第一次使用JSFIDLE:@adrift-这是JSFIDLE，希望我做得正确-第一次使用JSFIDLE：谢谢你的帮助-我真的很感谢！我现在意识到我没有正确地看待它，没有考虑“移动优先”的方面，因为基本样式没有反映这一点。再次感谢。谢谢你的帮助-我真的很感激！我现在意识到我没有正确地看待它，没有考虑“移动优先”的方面，因为基本样式没有反映这一点。再次感谢。

<footer>
 <div class="container">
   <div class="row">     
     <div class="col-sm-4  ">
       <a href="#"><img src="http://www.kissingerassoc.com/images/1.gif" class="img-responsive center-to-left"/></a>
       <br>
       <br>
    <div class="small center-to-left ">&copy; 2013 Company, Inc.</div>
   </div>

    <div class="col-sm-4">
         <div class="text-center">
           <p><a href="#">Host Company, Inc.</a><br>
            <a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a></p>
           <p>social media icons</p>
         </div>
     </div>

     <div class="col-sm-4 ">
        <span class="center-to-right">
       <button type="button" class="btn btn-default btn-sm">
       <span class="glyphicon glyphicon-bullhorn"></span><br>
       Feedback
       </button>
     </span>
     </div>
 </div>
 </div>
</footer>

.center-to-left {
 display: block;
 margin-right: auto;
 margin-left: auto;
 text-align: center;
 }

.center-to-right {
 display: block;
 margin-right: auto;
 margin-left: auto;
 text-align: center;
 }


@media (min-width: 768px) {

.center-to-left {
 text-align: left;
 float: left;
 }

.center-to-right {
 float: right;
 text-align: right;
 }

}