Bootstrap vermasselt Button mit Link

Ich habe eine Navigationsleiste im Bootstrap mit einem Knopf, der zu einer anderen Seite, auf der Sie sich einloggen können, gemacht (ich arbeite immer noch an diesem Login-Teil) Aber sobald ich den Link (Href) Zwischen dem Knopf wird die ganze Navigationsleiste durcheinander gebracht. Ich kann mit Fotos zeigt ein BeispielBootstrap vermasselt Button mit Link

Dies ist die normale Version: http://prntscr.com/cq09nx
Dies ist die verkorkste Version: http://prntscr.com/cq09io

Ich kann einfach nicht herausfinden, wie es richtig wieder . Hier ist der HTML-Code:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #42A2CE; 
 
} 
 
::selection { 
 
    background: white; 
 
} 
 
@font-face { 
 
    font-family: "Nexa Light"; 
 
    src: url('../font/Nexa%20Light.otf'); 
 
} 
 
@font-face { 
 
    font-family: "Lato-Bold"; 
 
    src: url('../font/Lato-Bold.ttf'); 
 
} 
 
.navbar-default { 
 
    position: relative; 
 
    font-family: "Lato-Bold"; 
 
    background-color: white; 
 
    box-shadow: 20px; 
 
    padding: 15px; 
 
    border-radius: 0; 
 
    border: none; 
 
    font-size: 25px; 
 
    -webkit-box-shadow: 0 12px 8px -6px #999; 
 
    -moz-box-shadow: 0 12px 8px -6px #999; 
 
    box-shadow: 0 12px 8px -6px #999; 
 
} 
 
.navbar-header { 
 
    right: auto; 
 
} 
 
.navbar-nav > li {} .navbar-default .navbar-brand, 
 
.navbar-default .navbar-brand:hover, 
 
.navbar-default .navbar-brand:focus { 
 
    color: black; 
 
    font-size: 30px; 
 
} 
 
.navbar-default .navbar-nav > li > a { 
 
    color: black; 
 
} 
 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: black; 
 
    opacity: 0.5; 
 
} 
 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: black; 
 
    background-color: transparent; 
 
} 
 
.navbar-default .navbar-text { 
 
    color: #FFF; 
 
} 
 
.navbar-default .navbar-toggle { 
 
    background-color: grey; 
 
} 
 
.icon-bar {} .navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    background-color: rgb(44, 44, 45); 
 
} 
 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #FFF; 
 
} 
 
.col-md-5 { 
 
    font-family: "Lato-Bold"; 
 
    padding: 10px; 
 
    color: white; 
 
    font-size: 20px; 
 
} 
 
.col-md-12 { 
 
    font-family: "Lato-Bold"; 
 
    height: 520px; 
 
    padding: 10px; 
 
    color: white; 
 
} 
 
.navbar-collapse { 
 
    border: 0px; 
 
} 
 
.navbar-default .navbar-collapse { 
 
    color: #e7e7e7; 
 
} 
 
.navbar-default .navbar-collapse, 
 
.navbar-default .navbar-form { 
 
    border-color: transparent; 
 
    box-shadow: none; 
 
} 
 
.dropdown-menu { 
 
    background-color: transparent; 
 
    ; 
 
    text-decoration-color: black; 
 
} 
 
.dropdown-toggle { 
 
    background-color: transparent; 
 
    color: black; 
 
} 
 
.navbar-default .navbar-nav .open .dropdown-menu>li>a, 
 
.navbar-default .navbar-nav .open .dropdown-menu { 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.dropdown-menu:hover { 
 
    color: rgb(44, 44, 45); 
 
} 
 
.img-responsive { 
 
    text-align: right; 
 
    max-width: 100%; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
#footer { 
 
    height: 200px; 
 
    color: lightgrey; 
 
} 
 
.link { 
 
    text-decoration: none; 
 
    color: lightgrey; 
 
} 
 
.link:hover { 
 
    color: yellow; 
 
    text-decoration: none; 
 
} 
 
.btn { 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    padding: 10px 16px; 
 
} 
 
.btn-lg { 
 
    font-size: 18px; 
 
    line-height: 1.33; 
 
    border-radius: 6px; 
 
} 
 
.btn-primary { 
 
    color: #fff; 
 
    background-color: #428bca; 
 
    border-color: #357ebd; 
 
} 
 
.btn-primary:hover, 
 
.btn-primary:focus, 
 
.btn-primary:active, 
 
.btn-primary.active, 
 
.open .dropdown-toggle.btn-primary { 
 
    color: #fff; 
 
    background-color: #3276b1; 
 
    border-color: #285e8e; 
 
} 
 
.btn-primary.raised { 
 
    box-shadow: 0 3px 0 0 #007299; 
 
} 
 
.btn-primary.raised:active, 
 
.btn-primary.raised.active { 
 
    background: #33a6cc; 
 
    box-shadow: none; 
 
    margin-bottom: -3px; 
 
    margin-top: 3px; 
 
} 
 
.btn { 
 
    padding: 14px 24px; 
 
    border: 0 none; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
} 
 
.btn:focus, 
 
.btn:active:focus, 
 
.btn.active:focus { 
 
    outline: 0 none; 
 
} 
 
.btn-primary { 
 
    background: #0099cc; 
 
    color: #ffffff; 
 
} 
 
.btn-primary:hover, 
 
.btn-primary:focus, 
 
.btn-primary:active, 
 
.btn-primary.active, 
 
.open > .dropdown-toggle.btn-primary { 
 
    background: #33a6cc; 
 
} 
 
.btn-primary:active, 
 
.btn-primary.active { 
 
    background: #007299; 
 
    box-shadow: none; 
 
} 
 
.btn-primary.raised:active, 
 
.btn-primary.raised.active { 
 
    background: #33a6cc; 
 
    box-shadow: none; 
 
    margin-bottom: -3px; 
 
    margin-top: 3px; 
 
} 
 
.navbar-right { 
 
    padding-right: 100px; 
 
} 
 
.navbar-brand { 
 
    padding-left: 50px; 
 
} 
 
.img-responsive { 
 
    display: block; 
 
    height: 100%; 
 
}

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

 
<head> 
 
    <title>Niet beschikbaar</title> 
 
    <link rel="shortcut icon" href="img/favicon2.ico" type="image/x-icon"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
 
    </script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <!-- NAVIGATIE BALK --> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <!-- logo --> 
 
    <div class="navbar-header"> 
 
     <!-- --> 
 
     <a class="navbar-brand" href="#"> 
 
     Logo 
 
     </a> 
 

 
     <!-- Inklappbaar ding als je op mobiel zit--> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- menu eitems linker kant--> 
 
    <div class="collapse navbar-collapse" id="mainnavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 

 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="paginas/overmij/index.html">Over mij</a> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 

 
     <!-- Dropdown --> 
 
     <!-- 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Profiel</a></li> 
 
       <li><a href="#">Instellingen</a></li> 
 
      </ul> 
 
     </li> 
 
     --> 
 
     <li> 
 
      <a href="paginas/login/index.html"> 
 
      <button type="button" class="btn btn-primary btn-lg raised">Aanmelden</button> 
 
      </a> 
 
     </li> 
 
     </ul> 
 

 

 
     <!-- Aan de rechterkant --> 
 

 

 
    </nav> 
 

 
    <!-- EINDE NAVIAGTIE BALK--> 
 

 

 

 
    <div class="container-fluid"> 
 

 
    <div class="row"> 
 

 
     <div class="col-xs-12 col-md-5 col-md-offset-2"> 
 
     <h1 class="titel">Deze website is helaas nog niet beschikbaar</h1> 
 
     Er word momenteel gewerkt aan deze website. Probeer op een later moment terug te komen. Er wordt echt heel erg hard gewerkt aan deze website, zo hard zelfs dat het waarschijnelijk nooit af komt. Maar dat boeit niemand want niemand bezoekt deze website. 
 
     Deze website is alleen bekeken door mensen die ik ken. Want niemand is geintresseert in mijn website wat ik heel klote vindt. Wat ik ook niet begrijp is dat je nog door leest 
 

 
     <br> 
 
     <br>Rainier, 
 
     <img src="img/Maintance.png" class="img-responsive" alt="" style="float:right" /> 
 
     <br> 
 
     <br> 
 

 
     <!-- 
 
     </div> 
 

 
    </div> 
 

 

 
</body> 
 
</html>

Ich bin nur ein Anfänger in Bootstrap wie Sie sagen können. Ich hoffe, ihr könnt mir dabei helfen. Vielen Dank im Voraus

Rainier,

Quelle

2016-10-05 Rainier Laan

Sie haben unclosed div-Tag in Navigationsleiste sowie 3 unclosed div in bestimmten Code. –

lassen Sie mich wissen, ob meine Antwort unten für Sie funktioniert. –

Sie die Klassen direkt auf den Link anwenden können, keine Notwendigkeit für ein Button-Element:

<li> 
    <a class="btn btn-primary btn-lg raised" href="paginas/login/index.html"> 
    Aanmelden 
    </a> 
</li>

Versuchen Sie, ob das hilft.

Auch scheint dieser Beitrag das gleiche Problem zu beschreiben:

Adding href to one button in btn-toolbar and maintaining alignment

Quelle

2016-10-05 07:20:18 marsze

Ich habe das schon versucht, aber es hat nicht funktioniert. Deshalb frage ich ;-). Die Schaltfläche klickt nur ohne Link. –

Ich habe es jetzt funktioniert. aber der Knopf ist jetzt ein bisschen durcheinander. Es ist immer noch blau, aber die Buchstaben sind schwarz und beim Schwenken wird der Knopf weiß. Ich probierte das im HTML

Aanmelden

–

Und das mit dem CSS: .aanmelden { text-decoration: none; Farbe: weiß; } –

siehe hier>jsfiddle oder Codeausschnitt unten

entfernen padding-top aus den letzten li a (das ist die Taste)

.navbar-nav li:last-child a { padding-top:0;}

oder Sie könnten der letzteneine Klasse zuweisen Stilund dann dieser Klasse

body { 
 
margin: 0; 
 
padding: 0; 
 
background-color: #42A2CE; 
 
} 
 

 
::selection{ 
 
background: white; 
 
} 
 

 
@font-face { 
 
font-family: "Nexa Light"; 
 
src: url('../font/Nexa%20Light.otf'); 
 
} 
 

 
@font-face { 
 
font-family: "Lato-Bold"; 
 
src: url('../font/Lato-Bold.ttf'); 
 
} 
 

 
.navbar-default { 
 
position: relative; 
 
font-family: "Lato-Bold"; 
 
background-color: white; 
 
box-shadow: 20px; 
 
padding: 15px; 
 
border-radius: 0; 
 
border: none; 
 
font-size: 25px; 
 
-webkit-box-shadow: 0 12px 8px -6px #999; 
 
    -moz-box-shadow: 0 12px 8px -6px #999; 
 
     box-shadow: 0 12px 8px -6px #999; 
 
} 
 

 
.navbar-header{ 
 
right: auto; 
 
} 
 

 
.navbar-nav > li{ 
 
} 
 

 
.navbar-default .navbar-brand, 
 
.navbar-default .navbar-brand:hover, 
 
.navbar-default .navbar-brand:focus { 
 
    color: black; 
 
    font-size: 30px; 
 

 
} 
 

 
.navbar-default .navbar-nav > li > a { 
 
    color: black; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover, 
 
.navbar-default .navbar-nav > li > a:focus { 
 
    color: black; 
 
    opacity: 0.5; 
 

 
} 
 

 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar-default .navbar-nav > .active > a:focus { 
 
    color: black; 
 
    background-color: transparent; 
 
} 
 

 
.navbar-default .navbar-text { 
 
    color: #FFF; 
 
} 
 

 
.navbar-default .navbar-toggle { 
 
    background-color: grey; 
 

 
} 
 

 
.icon-bar { 
 

 
} 
 

 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    background-color: rgb(44, 44, 45); 
 
} 
 

 
.navbar-default .navbar-toggle .icon-bar { 
 
    background-color: #FFF; 
 
} 
 

 
.col-md-5 { 
 
font-family: "Lato-Bold"; 
 
padding: 10px; 
 
color: white; 
 
font-size: 20px; 
 
} 
 

 
.col-md-12 { 
 
font-family: "Lato-Bold"; 
 
height: 520px; 
 
padding: 10px; 
 
color: white; 
 
} 
 

 
.navbar-collapse { 
 
border: 0px; 
 
} 
 

 
.navbar-default .navbar-collapse { 
 
color: #e7e7e7; 
 
} 
 

 
.navbar-default .navbar-collapse, .navbar-default .navbar-form { 
 
border-color: transparent; 
 
box-shadow: none; 
 
} 
 

 
.dropdown-menu { 
 
background-color: transparent;; 
 
text-decoration-color: black; 
 
} 
 

 

 
.dropdown-toggle { 
 
background-color: transparent; 
 
color: black; 
 
} 
 

 

 
.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu { 
 
background-color: black; 
 
color: white; 
 
} 
 

 
.dropdown-menu:hover { 
 
color: rgb(44, 44, 45); 
 
} 
 

 
.img-responsive { 
 
text-align: right; 
 
max-width: 100%; 
 
width: 200px; 
 
height: 200px; 
 
} 
 

 
#footer { 
 
height: 200px; 
 
color: lightgrey; 
 
} 
 

 
.link { 
 
text-decoration: none; 
 
color: lightgrey; 
 
} 
 

 
.link:hover { 
 
color: yellow; 
 
text-decoration: none; 
 
} 
 

 
.btn { 
 
display: inline-block; 
 
padding: 6px 12px; 
 
margin-bottom: 0; 
 
font-size: 14px; 
 
font-weight: normal; 
 
line-height: 1.42857143; 
 
text-align: center; 
 
white-space: nowrap; 
 
vertical-align: middle; 
 
cursor: pointer; 
 
-webkit-user-select: none; 
 
-moz-user-select: none; 
 
    -ms-user-select: none; 
 
     user-select: none; 
 
background-image: none; 
 
border: 1px solid transparent; 
 
border-radius: 4px; 
 
padding: 10px 16px; 
 
} 
 

 
.btn-lg { 
 
font-size: 18px; 
 
line-height: 1.33; 
 
border-radius: 6px; 
 
} 
 

 
.btn-primary { 
 
color: #fff; 
 
background-color: #428bca; 
 
border-color: #357ebd; 
 
} 
 

 
.btn-primary:hover, 
 
.btn-primary:focus, 
 
.btn-primary:active, 
 
.btn-primary.active, 
 
.open .dropdown-toggle.btn-primary { 
 
color: #fff; 
 
background-color: #3276b1; 
 
border-color: #285e8e; 
 
} 
 

 
.btn-primary.raised { 
 
box-shadow: 0 3px 0 0 #007299; 
 
} 
 
.btn-primary.raised:active, .btn-primary.raised.active { 
 
background: #33a6cc; 
 
box-shadow: none; 
 
margin-bottom: -3px; 
 
margin-top: 3px; 
 
} 
 

 
.btn { 
 
padding: 14px 24px; 
 
border: 0 none; 
 
font-weight: 700; 
 
letter-spacing: 1px; 
 
text-transform: uppercase; 
 
} 
 
.btn:focus, .btn:active:focus, .btn.active:focus { 
 
outline: 0 none; 
 
} 
 

 
.btn-primary { 
 
background: #0099cc; 
 
color: #ffffff; 
 
} 
 
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { 
 
background: #33a6cc; 
 
} 
 
.btn-primary:active, .btn-primary.active { 
 
background: #007299; 
 
box-shadow: none; 
 
} 
 

 
.btn-primary.raised:active, .btn-primary.raised.active { 
 
background: #33a6cc; 
 
box-shadow: none; 
 
margin-bottom: -3px; 
 
margin-top: 3px; 
 
} 
 

 

 
.navbar-right { 
 
padding-right: 100px; 
 
} 
 

 
.navbar-brand { 
 
padding-left: 50px; 
 
} 
 

 
.img-responsive { 
 
display: block; 
 
height: 100%; 
 
} 
 
.navbar-nav li:last-child a { 
 
    padding-top:0; 
 
    padding-bottom:0; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
<!-- logo --> 
 
<div class="navbar-header"> 
 
    <!-- --> 
 
    <a class="navbar-brand" href="#"> 
 
    Logo 
 
    </a> 
 

 
    <!-- Inklappbaar ding als je op mobiel zit--> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 

 
<!-- menu eitems linker kant--> 
 
<div class="collapse navbar-collapse" id="mainnavbar"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 

 
    <li class="active"><a href="#">Home</a></li> 
 
    <li><a href="paginas/overmij/index.html">Over mij</a></li> 
 
    <li><a href="#">Contact</a></li> 
 

 
    <!-- Dropdown --> 
 
    <!-- 
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Profiel</a></li> 
 
      <li><a href="#">Instellingen</a></li> 
 
     </ul> 
 
    </li> 
 
    --> 
 
    <li><a href="paginas/login/index.html"><button type="button" class="btn btn-primary btn-lg raised">Aanmelden</button></a></li> 
 
    </ul> 
 

 

 
    <!-- Aan de rechterkant --> 
 

 

 
</nav> 
 

 
<!-- EINDE NAVIAGTIE BALK--> 
 

 

 

 
<div class="container-fluid"> 
 

 
<div class="row"> 
 

 
    <div class="col-xs-12 col-md-5 col-md-offset-2"> 
 
    <h1 class="titel">Deze website is helaas nog niet beschikbaar</h1> 
 
     Er word momenteel gewerkt aan deze website. Probeer op een later moment terug te komen. 
 
     Er wordt echt heel erg hard gewerkt aan deze website, zo hard zelfs dat het waarschijnelijk nooit af komt. 
 
     Maar dat boeit niemand want niemand bezoekt deze website. Deze website is alleen bekeken door mensen die ik ken. 
 
     Want niemand is geintresseert in mijn website wat ik heel klote vindt. Wat ik ook niet begrijp is dat je nog door leest 
 

 
     <br> 
 
     <br> 
 
     Rainier, 
 
     <img src="img/Maintance.png" class="img-responsive" alt="" style="float:right"/> 
 
     <br> 
 
     <br> 
 

 
     <!-- 
 
    </div>

Quelle

2016-10-05 07:26:03

Bootstrap vermasselt Button mit Link

Antwort

Verwandte Themen