NavBar Оправданная укладка по вертикали на мобильном телефоне

My Top NavBar с использованием загрузочного лотка на рабочем столе отлично, но когда я просматриваю свой сайт с помощью своего мобильного телефона, навигационные ссылки отображаются вертикально, а не горизонтально, почему это происходит? любой ключ?NavBar Оправданная укладка по вертикали на мобильном телефоне

Я использую самозагрузки, вот мой код:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 
body { 
 
    background: black url(Images/image.png) no-repeat center center; 
 
    height: 100vh; 
 
} 
 
.footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
.navBarLinks { 
 
    color: white; 
 
} 
 
.navBarLinks:hover { 
 
    color: black; 
 
} 
 
.body-content {} .dl-horizontal dt { 
 
    white-space: normal; 
 
} 
 
input, 
 
select, 
 
textarea { 
 
    max-width: 280px; 
 
}

<ul class="nav nav-justified navbar-inverse"> 
 
    <li><a class="navBarLinks">Stuff1</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff2</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff3</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff4</a> 
 
    </li> 
 
    <li><a class="navBarLinks">Stuff5</a> 
 
    </li> 
 
</ul> 
 
//more stuff not relevant

Спасибо заранее!

источник

2016-10-01 TiagoM

Bootstrap использует мобильный первый css. Поэтому, когда экран является мобильным размером, он использует css, который отображает список как обычный. Однако, когда экран достигает минимальной ширины 768, он меняет его, чтобы отобразить: table-cell. Это известно как отзывчивый метод с использованием медиа-запросов. – orangeh0g

Я получаю это, спасибо, так что мне может понадобиться совершенно новый макет только для мобильных телефонов. Потому что они выглядят ужасно. – TiagoM

Обычно навигация скрыта, и вы получаете доступ к ней, хотя значок меню гамбургера для мобильного просмотра. См. Пример на загрузочном сайте ... сжимайте окно, чтобы оно было мобильным размером, и вы увидите, как он работает. Ссылка на загрузку https://getbootstrap.com/examples/navbar/ – orangeh0g

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a class="navBarLinks">Stuff1</a></li> 
 
     <li><a class="navBarLinks">Stuff2</a></li> 
 
     <li><a class="navBarLinks">Stuff3</a></li> 
 
     <li><a class="navBarLinks">Stuff4</a></li> 
 
     <li><a class="navBarLinks">Stuff5</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

Это простой пример того, что я говорил о ..., используя загрузочный пример.

https://getbootstrap.com/examples/navbar/

Когда «Run фрагмент кода» открыть его с помощью кнопки на всю страницу, а затем сжать браузер, чтобы получить лучшее представление.

источник

2016-10-01 20:47:17 orangeh0g

Большое вам спасибо! Это работало безупречно !!! Я только что изменил несколько деталей стиля, чтобы соответствовать моей собственной потребности, вот мой окончательный результат: https://gist.github.com/anonymous/359b6862cac06d467acf0c0296a3f6ba – TiagoM

NavBar Оправданная укладка по вертикали на мобильном телефоне

ответ

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