Блог

Главная - Вопросы по программированию - Горизонтальный список Bootstrap 3 div

Горизонтальный список Bootstrap 3 div

#responsive-design #twitter-bootstrap-3 #html-lists

#адаптивный дизайн #twitter-bootstrap-3 #html-списки

Вопрос:

У меня есть список горизонтальных разделов, которые я не могу заставить их действовать так, как я хочу. Чего я хочу добиться, так это иметь

  • для md, lg, sm — список прямоугольных разделов, которые содержат небольшое изображение класса «миниатюра» изображения любого размера и продолжают имя пользователя по горизонтали — как видно на примере в md view.

  • для xs я хочу, чтобы каждая запись была ниже другой, имя под изображением — которое должно быть размером экрана.

Я не мог привести пример с изображением, поскольку я уже использовал слишком много встроенного css.

http://www.bootply.com/T0AAHhHU0h

Ответ №1:

Если я не неправильно понял ваш вопрос, похоже, вы довольно близки к тому, что ищете… просто измените свой col-md-3 на col-sm-3 , и переключение на вертикальный макет произойдет в точке останова xs вместо точки останова sm, как здесь: http://www.bootply.com/Ba1aGC1Lds .

 <div class="col-sm-3" style="margin-bottom:20px">
  <div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
    <div class="col-md-4" style="background-color:black;height:60px">
  </div> 
  <div class="col-md-8">
   <strong>John Smith</strong>
  </div>
</div>