Bootstrap navbar Dropdown-Taste

Ich versuche, ein Dropdown-Menü mit Bootstrap in einem navbar zu erreichen. Ich bin auf this example gestoßen und es funktioniert offensichtlich perfekt. Allerdings wollte ich das 1. Dropdown (von links) in eine dropdown button ändern. Wenn ich jedoch versuche, es in eine Schaltfläche zu ändern, wird das Styling komplett durcheinander gebracht (siehe Bild unten).Bootstrap navbar Dropdown-Taste

Relevante Code:

<body> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Logo goes here</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
     <div class="btn-group"> 
      <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Hollywood Account</a></li> 
      <li><a href="#">Another Account</a></li> 
      <li><a href="#">Yet another Account</a></li> 
      </ul> 
     </div> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
</body>

Quelle

2016-04-11 newkid101

die .btn in einem Wrapper wickeln als navbar-form klassifiziert die Polsterung gemäß dem gegebenen Beispiel zu ermöglichen, wie folgt:

<ul class="nav navbar-nav"> 
    <li class="dropdown"> 
     <!-- doesn't need to be a form element --> 
     <form class="navbar-form"> 
      <div class="btn-group"> 
       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Hollywood Account</a></li> 
        <li><a href="#">Another Account</a></li> 
        <li><a href="#">Yet another Account</a></li> 
       </ul> 
      </div> 
     </form> 
     <!-- example using div and anchor instead of form and button --> 
     <div class="navbar-form"> 
      <div class="btn-group"> 
       <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Hollywood Account</a></li> 
        <li><a href="#">Another Account</a></li> 
        <li><a href="#">Yet another Account</a></li> 
       </ul> 
      </div> 
     </div> 
    </li> 
</ul>

Hier ist es auf CodePen

Quelle

2016-04-11 21:11:00

funktioniert perfekt. Aber warum in eine Form wickeln? Ich wollte ihm eine Funktionalität wie [this] (http://www.bootply.com/b4NKREUPkN) geben, deshalb habe ich versucht, "btn" – newkid101

die .navbar-Form zu bekommen, was der Taste die richtige Auffüllung gibt wie im Beispiel, Sie sind richtig, aber ich muss nicht eine 'Form' sein und die' .btn' muss nicht eine 'Taste' sein, die ich im Beispiel verwendet, wie das ist, was Bootstrap verwendet ihr Beispiel, ich habe das Codepen Beispiel aktualisiert, um sowohl Version Form und div –

einfach den <a>-Tag in einen <button> Tag Wechsel sollte es tun.

<ul class="nav navbar-nav"> 
    <li class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></button> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Hollywood Account</a></li> 
      <li><a href="#">Another Account</a></li> 
      <li><a href="#">Yet another Account</a></li> 
     </ul> 
    </li> 
</ul>

Bearbeiten: Auf einer meiner eigenen Websites überprüft. Versuchen Sie, die <div class="btn-group"> zu entfernen.

Quelle

2016-04-11 21:04:01 arch1ve

Ich habe es versucht. Keine Änderung. – newkid101

Stil keine Änderung. Obige Lösung funktioniert einwandfrei – newkid101

Es gibt keinen Grund, die BTN haben in einer Form verpackt, die keinen Sinn macht. In Bootstrap 3 müssen Sie nur die Klasse .navbar-btn zu der Schaltfläche hinzufügen, damit sie in der Navigationsleiste vertikal ausgerichtet wird. Auch wenn Sie nur die eine Schaltfläche haben, gibt es keinen Grund, eine Schaltflächengruppe zu verwenden. Wenn Sie mehr als eine Schaltfläche verwenden möchten, verwenden Sie die Schaltflächengruppe. Aber die überprüfte Antwort, die es in ein Formular einwickelt, ist nur albern plus das Hinzufügen eines anderen dom-Elements ohne Grund. Versuchen Sie Folgendes:

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Logo goes here</a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <button class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">Select an Account<span class="caret"></span></button> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Hollywood Account</a></li> 
      <li><a href="#">Another Account</a></li> 
      <li><a href="#">Yet another Account</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

Quelle

2016-04-11 21:31:23

Drinkin Menschen richtig ist

Ganz einfach zu ändern:

<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>

Um dies:

<a class="navbar-btn btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">Select an Account<span class="caret"></span></a>

Es Ihre Schaltfläche vertikal in der Navigationsleiste zentrieren wird

Quelle

2016-04-12 00:38:13

in meinen Tests die Klasse hinzufügen 'navbar-btn' zu einem' a' machte die Schaltfläche erheblich größer (größere Höhe) –

Bootstrap navbar Dropdown-Taste

Antwort

Verwandte Themen