Построение ответной навигационной панели с загрузочным устройством

Question

Я создаю сайт, используя Bootstrap 3. Моя проблема заключается в том, что навигационная панель на веб-странице отображается рядом с брендом div, который перемещается влево. Таким образом, на навигационной панели не хватает места, когда вы используете свой мобильный телефон для доступа к веб-странице, и вам нужно прокручивать меню.

HTML

<div class="navbar navbar-fixed-top navbar-default" role="navigation"> 
     <div class="container"> 

      <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="index.html">FUTURE LOGO</a> 

      <div class="navbar-collapse navbar-responsive-collapse collapse"> 
       <ul class="nav navbar-nav"> 

       <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Domu</a></li> 


       <li><a href="obsahmp.html">Obsah MP</a></li> 

       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Responzivní webdesign<strong class="caret"></strong></a> 
        <ul class="dropdown-menu"> 
         <li><a href="responzivniwebdesign.html">Co to vlastně je?</a></li> 
         <li><a href="webovarozvrzeni.html">Webová rozvržení</a></li> 
         <li><a href="">Tvorba responzivního webu</a></li> 

         <li class="divider"></li> 

         <li class="dropdown-header">CSS frameworky</li> 
         <li><a href="#">Co, jak a proč?</a></li> 
         <li><a href="#">Twitter bootstrap</a></li> 
        </ul><!-- End dropdown-menu--> 
       </li><!-- End dropdown--> 

       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Použité komponenty<strong class="caret"></strong></a> 
        <ul class="dropdown-menu"> 
         <li><a href="navbar.html">Navbar</a></li> 
         <li><a href="dropdown.html">Dropdown</a></li> 
         <li><a href="carousel.html">Carousel</a></li> 

         <li class="divider"></li> 

         <li class="dropdown-header">Dropdown-header</li> 
         <li><a href="#">Subsection</a></li> 
         <li><a href="#">Subsection</a></li> 
        </ul><!-- End dropdown-menu--> 
       </li><!-- End dropdown--> 
       </ul><!--End nav--> 
      </div><!-- End navbar-collapse--> 
     </div> <!-- End container--> 
    </div> <!-- End navbar--> 

Вы также можете проверить Navbar здесь: www.tomas-nosek.moxo.cz. Просто запустите окно браузера, и вы увидите, что у меня есть проблема.

Answer 1

Попробуйте это,

добавить этот <div class="visible-xs clearfix"></div> к концу <a class="navbar-brand" href="index.html">FUTURE LOGO</a>

это очистить плавающий CSS на небольших устройствах,

<div class="navbar navbar-fixed-top navbar-default" role="navigation"> 
     <div class="container"> 

      <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

      <a class="navbar-brand" href="index.html">FUTURE LOGO</a> 
      <div class="visible-xs clearfix"></div> 
      <div class="navbar-collapse navbar-responsive-collapse collapse"> 
       <ul class="nav navbar-nav"> 

       <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> Domu</a></li> 


       <li><a href="obsahmp.html">Obsah MP</a></li> 

       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Responzivní webdesign<strong class="caret"></strong></a> 
        <ul class="dropdown-menu"> 
         <li><a href="responzivniwebdesign.html">Co to vlastně je?</a></li> 
         <li><a href="webovarozvrzeni.html">Webová rozvržení</a></li> 
         <li><a href="">Tvorba responzivního webu</a></li> 

         <li class="divider"></li> 

         <li class="dropdown-header">CSS frameworky</li> 
         <li><a href="#">Co, jak a proč?</a></li> 
         <li><a href="#">Twitter bootstrap</a></li> 
        </ul><!-- End dropdown-menu--> 
       </li><!-- End dropdown--> 

       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Použité komponenty<strong class="caret"></strong></a> 
        <ul class="dropdown-menu"> 
         <li><a href="navbar.html">Navbar</a></li> 
         <li><a href="dropdown.html">Dropdown</a></li> 
         <li><a href="carousel.html">Carousel</a></li> 

         <li class="divider"></li> 

         <li class="dropdown-header">Dropdown-header</li> 
         <li><a href="#">Subsection</a></li> 
         <li><a href="#">Subsection</a></li> 
        </ul><!-- End dropdown-menu--> 
       </li><!-- End dropdown--> 
       </ul><!--End nav--> 
      </div><!-- End navbar-collapse--> 
     </div> <!-- End container--> 
    </div> <!-- End navbar--> 

Demo

Answer 2

Вы хотите поставить «clear: left» в навигационную панель на мобильном телефоне. Также возможно добавить 'col-xs-12' в качестве класса в контейнер с меню.

В основном вам нужно разбить меню на новую строку.