Bootstrap 3 Выравнивание текста нижнего колонтитула на основе размера сетки

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

}