Créer responsive Bootstrap barre de navigation avec deux lignes

Je suis en train de créer un responsive Bootstrap 3 barre de navigation avec deux rangées. Cependant, je vais avoir des ennuis avec la structure de l'HTML et de l'effondrement de la fonctionnalité.

Ci-dessous est une description visuelle du résultat souhaité, et j'espérais que quelqu'un pourrait me diriger dans la bonne direction en termes de HTML/CSS (avec autant de défaut de Bootstrap de fonctionnalités que possible).

Essentiellement le menu est souhaitée pour effectuer les opérations suivantes:

  • Sur tablette/les périphériques de bureau, la première ligne est le logo et un menu de
    petits liens secondaires (Link1-3). La deuxième ligne est le menu principal avec
    liens (LinkA-E).
  • Sur le mobile, le classique de l'effondrement de la conception devraient
    apparaissent avec le logo et le hamburger icône. Le menu développé devrait
    montrer les liens principaux (LinkA-E) en premier, puis les liens secondaires
    (Link1-3) en dernier.

Tablette/appareil de Bureau:

|----------------------------------------------------------|
|  LOGO/BRAND                         Link1  Link2  Link3  |
|----------------------------------------------------------|
|  LinkA  LinkB  LinkC  LindD  LinkE                       |
|----------------------------------------------------------|

Appareil Mobile (réduite):

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|

Appareil Mobile (élargi):

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|
|  LinkA                               |
|  LinkB                               |
|  LinkC                               |
|  LinkD                               |
|  LinkE                               |
|--------------------------------------|
|  Link1                               |
|  Link2                               |
|  Link3                               |
|--------------------------------------|

OriginalL'auteur preyz | 2016-12-23

  1. 10

    Si j'avais un code html/css de votre projet, je l'utilise pour montrer comment vous devriez le faire, mais dans ce contexte, CE HTML est venu de statique de la navbar exemple de Bootstrap v3.3.7

    effectivement l'idée est de placer <div id="navbar" class="navbar-collapse collapse"> en ligne ci-dessous <div class="navbar-header"> avec le flottement et la largeur à 100% de son espace, puis en le tirant jusqu' <ul class="nav navbar-nav navbar-right"> avec margin-top: -50px;

    Avec que des requêtes de média nous assurer qu'il se comporter droit dans moblie appareil.

    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;
    }
}

    JUSTE Laissez-moi savoir si ça a fonctionné ou pas.

    Merci beaucoup! Cela fonctionne exactement comme l'avait demandé 🙂
    Plaisir à entendre 🙂

    OriginalL'auteur mohamad faramarzi