Mitteltaste in Bootstrap navbar (außerhalb Kollaps)

Ich mag würde auf eine Schaltfläche in der Navigationsleiste haben, das ist:Mitteltaste in Bootstrap navbar (außerhalb Kollaps)

inline mit dem Rest der navbar Elemente (dh es nicht zum nächsten geschoben bekommt Linie);
außerhalb des kollabierten Navigationsbereichs; und
immer für alle Bildschirmauflösungen in der Mitte der Seite positioniert (auch wenn die rechte Seite der Navigationsleiste ausgeblendet ist).

Ich habe besondere Probleme mit:

Zentrieren der Taste; und
einige Navigationselemente funktionieren nicht für kleinere Bildschirmauflösungen (wenn die Navigationsleiste minimiert ist).

Unten ist mein Code.

Alternative CSS, die ich versucht:

.navbar-button { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    white-space: nowrap; 
}

aber einige der anderen navbar Links verursacht werden, nicht zu arbeiten. Ich habe dann versucht, z-index zu verwenden, aber es schien nicht zu funktionieren.

body { 
 
    padding-top: 50px; 
 
    padding-bottom: 20px; 
 
} 
 
.section { 
 
    margin-bottom: 30cm; 
 
} 
 
.navbar-button { 
 
    display: inline-block; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
 

 
    <title>Test</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
      <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="#brand">Brand</a> 
 
     <div class="navbar-button"> 
 
      <button type="button" class="btn btn-primary navbar-btn">Button</button> 
 
     </div> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="text-center"> 
 
      <a href="#link1">Link-1</a> 
 
      </li> 
 
      <li class="text-center"> 
 
      <a href="#link2">Link-2</a> 
 
      </li> 
 
      <li class="text-center"> 
 
      <a href="#link3">Link-3</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="section" id="brand"> 
 
     <h3>Top</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="section" id="link1"> 
 
     <h3>Section-1</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="section" id="link2"> 
 
     <h3>Section-2</h3> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="section" id="link3"> 
 
     <h3>Section-3</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2016-07-25 bernie

Sie Position verwenden können: absolute, sondern gelten nicht 100% Breite, wie es meistens Ihre Links/Umschaltknopf Abdeckung wahrscheinlich ist. Sie können die .navbar-btn auch direkt auf die Schaltfläche in einem äußeren Teil anwenden.

Beispiel CSS:

.button-center { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}

Arbeitsbeispiel:

body { 
 
    padding-top: 50px; 
 
    padding-bottom: 20px; 
 
} 
 
.section { 
 
    margin-bottom: 30cm; 
 
} 
 
.button-center { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <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="https://www.github.com" target="_blank">Brand</a> 
 
     <button type="button" class="btn btn-primary navbar-btn button-center">Button</button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="text-center"> 
 
      <a href="https://www.github.com" target="_blank">Test Link</a> 
 
     </li> 
 
     <li class="text-center"> 
 
      <a href="#link2">Link-2</a> 
 
     </li> 
 
     <li class="text-center"> 
 
      <a href="#link3">Link-3</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="section" id="brand"> 
 
     <h3>Top</h3> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="section" id="link1"> 
 
     <h3>Section-1</h3> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="section" id="link2"> 
 
     <h3>Section-2</h3> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="section" id="link3"> 
 
     <h3>Section-3</h3> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Quelle

2016-07-25 19:57:09 vanburen

Mitteltaste in Bootstrap navbar (außerhalb Kollaps)

Antwort

Verwandte Themen