Bootstrap搞砸了按钮

Question

我在bootstrap中创建了一个导航栏，其中一个按钮链接到另一个可以登录的页面（我还在处理该登录部分）但是只要我将链接（Href）放在按钮之间就可以了整个导航栏搞砸了。我可以用图片

来展示一个例子

1. 这是正常版本：http://prntscr.com/cq09nx
2. 这是混乱的版本：http://prntscr.com/cq09io

我无法弄清楚如何再次正确。 这是HTML代码：

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>



    

我只是一个初学者，你可以说。我希望你们能帮我解决这个问题。提前谢谢

雷尼尔，

Answer 1

您可以直接将类应用于链接，不需要按钮元素：

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

尝试这是否有帮助。

此外，这篇文章似乎描述了同样的问题：

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

Answer 2

见这里＆gt; jsfiddle或下面的代码段

从上一个padding-top（即按钮）中删除li a

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

或者您可以将一个类分配给最后一个li，然后设置该类的样式

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;