Question

我一直在玩引导程序以我希望的方式设置导航栏。我正在努力，因为你可能会在我的代码中看到在这个菜单中将所有内容垂直居中。通过玩边距我做了一些平均修复，但我无法修复按钮。我确信有一个简单的解决方案，position:relative让一切都居中，但我无法找到它。

http://codepen.io/anon/pen/yMGEZb

感谢您的帮助！

Answer 1

updated codepen

只需在navbar-right li内添加按钮即可。无需修改您的CSS。

示例摘录

.navbar-default .navbar-header .navbar-brand {
  font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
  font-weight: 200;
  letter-spacing: 1px;
  color: #fdcc52;

}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #fcbd20;
}
.navbar-default .navbar-header .navbar-toggle {
  font-size: 12px;
  color: #222222;
  padding: 8px 10px;
}
.navbar-default .nav > li > a {
  font-family: Montserrat;
  font-weight:300;
  font-style:normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: #121212;
}
/*@media (min-width: 768px) 
    .button-nav {
    display: inline-block;
    z-index: 101;
}*/

.button-nav {
  position: relative;
  bottom: 50%;
  background-color: transparent;
  font-family: Montserrat;
  font-weight: 300;
  font-style:normal;
  letter-spacing:2px;
  font-size: 13px;
  color: #121212;
  text-transform: uppercase;
  border: 1px solid #121212;
  padding: 18px 40px;
  transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
  cursor:pointer;
  text-align:center;
  text-rendering: optimizeLegibility;

}

.button-nav:hover {
background-color: #1c1c1c;
  font-family: Montserrat;
  font-weight: 300;
  font-style:normal;
  letter-spacing:2px;
  font-size: 13px;
  color: white;
  text-transform: uppercase;
  border: 1px solid #1c1c1c;
  padding: 18px 40px;
  transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1);
  cursor:pointer;
  text-align:center;
  text-rendering: optimizeLegibility;






}

.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  color: #121212;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color: #fdcc52;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color: #fdcc52 !important;
  background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: transparent;
  }
  .navbar-default .navbar-header .navbar-brand {
    color: rgba(34, 34, 34, 0.1);
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: #121212;
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: white;
  }
  .navbar-default.affix {
    background-color: white;
    border-color: rgba(34, 34, 34, 0.1);
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: #222222;
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #fdcc52;
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: #222222;
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: #fdcc52;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container" style="height:80px;">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
           
            <a class="navbar-brand page-scroll" href="#page-top">
<img src="http://svgshare.com/i/17J.svg" width="220" height="50"  alt="">
                    
                    </a>
            </div>

            
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right" style="margin-top:20px;">
                    <li>
                        <a class="page-scroll" href="#download">Download</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#features">Features</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                                                              <li><button class="button-nav pull-right">Get started</button></li>
              
                </ul>
        
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
        
    </nav>

导航按钮不垂直对齐

1 个答案: