Bootstrap navbar x-scroll

Я пытаюсь изменить поведение навигационной панели Bootstrap, чтобы наследовать горизонтальную прокрутку вместо свертывания, она работает на мобильных устройствах, но я хочу, чтобы она была одинаковой для всех устройств ... с использованием SASS:Bootstrap navbar x-scroll

.navbar-nav { 
    li { 
    display: inline-block; // stops menu items from stacking 
    } 
} 
.scroll { 
    white-space: nowrap; 
    overflow-x: scroll; // scroll 
    -webkit-overflow-scrolling: touch; 
}

Вот образ в мобильном режиме, он прекрасно работает:

Как я могу увеличить размер окна просмотра и медиа запросов пнуть в нем полностью отключить горизонтальную прокрутку:

И, наконец, на рабочем столе:

HTML:

<div class="navbar-header"> 
    <a class="navbar-brand" href="#"><i class="fa fa-home"></i></a> 
</div> 
<ul class="nav navbar-nav scroll"> 
    <li><a href="#">Hyperlink</a></li> 
    <li><a href="#">Hyperlink</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret hidden-xs"></span></a> 
    ... 
    </li> 
    <li><a href="#">Hyperlink</a></li> 
    <li><a href="#">Hyperlink</a></li> 
    <li><a href="#">Hyperlink</a></li> 
    <li><a href="#">Hyperlink</a></li> 
    <li><a href="#">Hyperlink</a></li> 
    <li><a href="#">Hyperlink</a></li> 
</ul>

Есть ли способ я могу держать й-свиток на протяжении всего сайта? Я не могу указать на CSS, который меняет его поведение. В качестве дополнительного бонуса мне также нужен .navbar и .navbar-header, чтобы оставаться встроенным, потому что это также укладывается в стек.

источник

2015-07-22 Goodbytes

Набор overflow-x: auto;. Это будет работать, если размер видового экрана будет меньше его минимальной ширины.

.scroll { 
    white-space: nowrap; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
}

http://jsfiddle.net/x3L06cv8/

источник

2015-07-22 12:13:39 Ferrrmolina

Я хочу, чтобы ваша работа над JSfiddle или что-то в этом роде. Но я думаю, что вы не используете медиа-запросы правильно, есть диапазон, который не имеет надлежащего кода CSS.

Таким образом, вы должны играть с запросами средств массовой информации, попытаться сделать их все с максимальной шириной: @media (макс-ширина: ...) и когда речь идет о запросе рабочих стола СМИ, сделать это с мин -width: 1200 пикселей или любую другую ширину, которую вы хотели бы иметь, так что это будет для всех устройств, превышающих эту ширину.

И для бренда, попробуйте сделать это для него:

.navbar-nav{ 
position:absolute; 
margin-left:10%; /* Or change it as your needs */ 
}

Или еще, сделать Div тег, которые имеют NavBar-заголовок и NavBar-Nav внутри него, и применить свойство дисплея, как вы сделали для теги li для обоих внутренних элементов. Как в этом примере, что я сделал:

<html> 
 
<head> 
 
    <title></title> 
 
    <style type="text/css"> 
 
     .all div,ul,li{ 
 
      display:inline-block; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="all"> 
 
     <div>Hahaha</div> 
 
     <ul> 
 
      <li>jlshqdm</li> 
 
      <li>jlshqdm</li> 
 
     </ul> 
 
    </div> 
 
</body> 
 
</html>

источник

2015-07-22 12:08:27

Bootstrap navbar x-scroll

ответ

Смежные вопросы