Question

我是Bootstrap的新手，并从v3开始。我试图找出是否有办法根据哪个网格大小生效来更改文本（或图像）的对齐方式。

我正在设计一个页脚，它有三列。左列的内容是左对齐的。中心列的内容以其列为中心。右栏的内容是右对齐的。这使得除了电话显示器之外的所有显示器尺寸都具有平衡，令人愉悦的页脚。在手机（超小网格）上，我希望这三列能够堆叠并使所有内容都居中（即使某些内容在较大的显示尺寸下左对齐或右对齐）。现在在我的设计中，它们正在堆叠，但L-C-R对齐使它看起来很糟糕。

有没有办法做到这一点，通过有效网格的大小来改变文本的对齐方式？请假设我可能对某些事情没有基本的了解，因为我对Bootstrap很新，也不是一个经验丰富的CSS人员。（我踌躇着，随便学习。）

Answer 1

这可以使用Bootstrap中的现有媒体查询来完成。由于v.3首先是移动的，我将首先使所有内容居中，然后在下一个更大的媒体查询（768）上为需要左右对齐的元素添加样式。我也编辑了一些代码：

<强> HTML

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

<强> CSS

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

}

基于网格大小的Bootstrap 3页脚文本对齐

1 个答案: