web-dev-qa-db-fra.com

Créer réactif Bootstrap navbar avec deux lignes

J'essaie de créer une barre de navigation réactive Bootstrap 3 avec deux lignes. Cependant, j'ai des problèmes avec la structure du HTML et la fonctionnalité de réduction.

Vous trouverez ci-dessous 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 fonctionnalités par défaut Bootstrap que possible).

Essentiellement, le menu est souhaité pour faire ce qui suit:

  • Sur les tablettes/ordinateurs 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 les liens principaux (LinkA-E).

  • Sur mobile, le design d'effondrement classique devrait apparaître avec l'icône du logo et du hamburger. Le menu étendu doit afficher les liens principaux (LinkA-E) en premier, puis les liens secondaires (Link1-3) en dernier.

Tablette/ordinateur de bureau:

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

Appareil mobile (réduit):

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

Appareil mobile (étendu):

|--------------------------------------|
|  LOGO/BRAND               HAMBURGER  |
|--------------------------------------|
|  LinkA                               |
|  LinkB                               |
|  LinkC                               |
|  LinkD                               |
|  LinkE                               |
|--------------------------------------|
|  Link1                               |
|  Link2                               |
|  Link3                               |
|--------------------------------------|
twitter-bootstraptwitter-bootstrap-3navbar
11
preyz

Si j'avais un html/css de votre projet, je l'utilise pour montrer comment vous devez le faire, mais dans ce contexte CE HTML vient de exemple de barre de navigation statique de Bootstrap v3.3.7

en réalité, l'idée est de placer <div id="navbar" class="navbar-collapse collapse"> dans la rangée en dessous <div class="navbar-header"> en flottant et en largeur sur 100% de son espace, puis en tirant <ul class="nav navbar-nav navbar-right"> avec margin-top: -50px;

Avec cette requête multimédia, nous nous assurerions qu'elle se comportera correctement dans l'appareil moblie.

[~ # ~] 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 [~ # ~] Faites-moi savoir si cela a fonctionné ou non.

11
mohamad faramarzi