Возникли проблемы с nav navbar-nav в начальной загрузке? - PullRequest
Новая
       9

Возникли проблемы с nav navbar-nav в начальной загрузке?

0 голосов
/ 09 мая 2018

Я пытаюсь создать адаптивное меню, я не уверен, что моя функция navbar-nav работает нормально или нет. Это первое создание адаптивного меню. Я создал класс navbar-nav, загрузил его на сервер и проверилс планшета, мобильные телефоны, оба дают одинаковый результат, в зависимости от устройства не изменились. пожалуйста, посетите сайт .Жду ответа, как изменить приведенный ниже код для отзывчивого меню и правильного руководства. 

<div class="container">
    <div class="navbar navbar-default">
    <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="image/logo.png" alt="Lotus Groups"/>
    Lotus Groups</a>
    </div>
    <ul class="nav navbar-nav" style="float:right"> 
    <li><a href="#">Lotus Construction</a></li>
    <li><a href="#">Lotus Interior</a></li>
    <li><a href="#">Lotus Digital</a></li>
    <li><a href="#">Lotus Property</a></li>
    <li><a href="#">Lotus Site</a></li>
    </ul>
    </div>
    </div>






 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Ответы [ 3 ]

0 голосов
/ 09 мая 2018

Вы также можете попробовать это: 

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div 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" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
                <span class="sr-only">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
                <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
                    <ul class="nav navbar-nav">
                        <li><img href="#"><img src="image/logo.png" alt="Lotus Groups"></li>
                        <li><a href="#">Lotus Construction</a></li>
                        <li><a href="#">Lotus Interior</a></li>
                        <li><a href="#">Lotus Digital</a></li>
                        <li><a href="#">Lotus Property</a></li>
                        <li><a href="#">Lotus Site</a></li>
                    </ul>
                </div>
</div></div>
        </div>


</body>

Я поместил ваше изображение в тег li, чтобы включить его в панель навигации, чтобы на мобильном устройстве изображение не отображалось в ваших различных меню. Тег div с class = "navbar-header" здесь для отображения кнопки переключения, когда экран имеет малый размер

EDIT: Я добавил строку в тэг головы, просто добавьте её, пожалуйста Я также удалил ваш первый контейнер класса div. Теперь должно работать!

0 голосов
/ 09 мая 2018

JsFiddle 

 Bootstrap includes a responsive, mobile first fluid grid system that 
 appropriately scales up to 12 columns as the device or viewport size 
 increases. 
 It includes predefined classes for easy layout options, as well as 
 powerful 
 mixins for generating more semantic layouts.
0 голосов
/ 09 мая 2018

Можете ли вы также опубликовать css, чтобы мы могли видеть, что находится в классе navbar-nav

Edit:

Попробуйте добавить 

    <meta name="viewport" content="width=device-width, initial-scale=1">

в заголовок, и если это не работает,

Взгляните на этот урок

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

...