Создать отзывчивый Bootstrap navbar с двумя строками

Я пытаюсь создать отзывчивый Bootstrap 3 на основе navbar с двумя строками. Однако у меня возникли проблемы со структурой HTML и функциональностью свернуть.



Ниже приведено визуальное описание желаемого результата, и я надеялся, что кто-то укажет мне правильное направление в терминах HTML/CSS (с максимально возможной загрузочной функциональностью по умолчанию).

По существу меню желательно сделать следующее:





  • На планшетные / настольные устройства, первая строка-логотип и меню
    небольшой вторичной связи (каналам 1-3). Вторая строка-это главное меню с
    основные звенья (LinkA-E).



  • На мобильном телефоне классический дизайн коллапса должен
    появится с логотипом и значком гамбургера. Расширенное меню должно
    сначала покажите основные ссылки (LinkA-E), а затем вторичные ссылки
    (Link1-3) последний.



Планшетное / настольное устройство: 



|----------------------------------------------------------|

|  LOGO/BRAND                         Link1  Link2  Link3  |

|----------------------------------------------------------|

|  LinkA  LinkB  LinkC  LindD  LinkE                       |

|----------------------------------------------------------|


Мобильное устройство (рухнул):



|--------------------------------------|

|  LOGO/BRAND               HAMBURGER  |

|--------------------------------------|


Мобильное устройство (расширенное):



|--------------------------------------|

|  LOGO/BRAND               HAMBURGER  |

|--------------------------------------|

|  LinkA                               |

|  LinkB                               |

|  LinkC                               |

|  LinkD                               |

|  LinkE                               |

|--------------------------------------|

|  Link1                               |

|  Link2                               |

|  Link3                               |

|--------------------------------------|
762   1  

1 ответ:

, Если у меня в HTML/CSS вашего проекта я использую его, чтобы показать, как вы должны это делать, но в данном контексте этот HTML приехал из статической навигации пример начальной загрузки В3.3.7

На самом деле идея заключается в том, чтобы поместить <div id="navbar" class="navbar-collapse collapse"> в строку ниже <div class="navbar-header"> с плавающей и шириной 100% ее пространства, а затем подтянуть <ul class="nav navbar-nav navbar-right"> с margin-top: -50px;

С этим медиа-запросом мы бы убедились, что он ведет себя правильно в Mobli устройство.

HTML 

<div class="container-fluid">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <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="#">Logo/Brand</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">LinkA</a></li>
      <li><a href="#">LinkB</a></li>
      <li><a href="#">LinkC</a></li>
      <li><a href="#">LinkD</a></li>
      <li><a href="#">LinkE</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li><a href="#">Link3</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>

CSS 

.navbar-collapse {
    float: left;
    width: 100%;
    clear: both;
}

@media (min-width: 768px) {
    .navbar-right {
        margin-top: -50px;
    }
}

Просто дайте мне знать, сработало это или нет.

10  
2016-12-23 18:56:28

Comments

    Ничего не найдено.
Click here to cancel reply.