Столбцы начальной загрузки для устройств с очень маленьким размером экрана

Question

Я пытаюсь создать отзывчивые столбцы с помощью начальной загрузки. На рабочем столе и на большом экране должно быть 4 столбца. В видовых экранах вкладок должно быть 3 столбца, а в очень маленьких видовых экранах должно быть 2 столбца.

Это моя разметка -

<nav class="page-footer-nav row">
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
    <a href="">Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
  </div>
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
    <a href="">Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
  </div>
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
    <a href="">Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
  </div>
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
    <a href="">Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
    <a href="">Sub Menu Item</a>
  </div>
</nav>

Эта разметка правильно работает на маленьких экранах, экранах настольных компьютеров и больших экранах. Но у него очень маленький беспорядок. Для лучшего понимания проверьте этот JSBIN.

Это снимок экрана в размере устройства xs-

enter image description here

html css twitter-bootstrap responsive-design

2

user3733831 7 Мар 2015 в 17:04

Answer 1

Очистите числа с плавающей запятой (с классом .clearfix) в определенных точках останова, чтобы предотвратить странную упаковку с неравномерным содержимым:

В документации Bootstrap для системы сеток они советуют вам чтобы добавить новый div между столбцами, чтобы понять, где столбцы должны очиститься. У div должен быть класс clearfix, чтобы столбцы были очищены слева, и один из вспомогательных классов, чтобы вы могли настроить таргетинг на конкретное окно просмотра.

ЖИВУЮ ДЕМО

И добавьте это между двумя частями:

вам нужно добавить clearfix <div class="clearfix visible-xs "></div>, чтобы избежать этой проблемы в устройствах xs

Вот так :

<nav class="page-footer-nav row">
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>

    <div class="clearfix visible-xs"></div> // < --- add this to fix the issue

      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3 ">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3 ">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
    </nav>

3

ZEE 7 Мар 2015 в 14:42

Answer 2

$('.page-footer-nav').each(function() {
    $(this).children('.footer-nav-section').matchHeight();
  });

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.5.2/jquery.matchHeight-min.js"></script>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.5.2/jquery.matchHeight-min.js"></script>

<nav class="page-footer-nav row">
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a> 
  </div>
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a> 
  </div>
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a> 
  </div>
  <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3"> <a href="">Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a>  <a href="">Sub Menu Item</a> 
  </div>
</nav>

Ваша проблема заключается в содержимом раздела footer-nav-section. Проблема в высоте div. Вам нужно сделать все div одинаковой высоты.

Используйте matchheight.js.

И функция,

  $('.page-footer-nav').each(function() {
$(this).children('.footer-nav-section').matchHeight();

});

-2

Bala Kumar 7 Мар 2015 в 14:51

Столбцы начальной загрузки для устройств с очень маленьким размером экрана

2 ответа

Похожие вопросы

Новые вопросы

html