Question

我的bootstrap导航栏遇到了一些问题。我希望导航栏的高度为85px，徽标和li项目在85px中垂直居中。我似乎无法让它正常工作。

我想要的一个很好的例子是https://devmounta.in/ navbar

HTML：

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">
        <img src="css/images/logo.png">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="item"><a href="#">About</a></li>
        <li id="item"><a href="#">Stats</a></li>
        <li id="item"><a href="#">Drivers</a></li>
        <li id="item"><a href="#">Facts</a></li>
        <li id="btn"><a href="#">Pledge Now</a></li>
      </ul>
    </div>
  </div>
</nav>

CSS：

header{
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 background-color: #66CCFF;
 border-bottom: 1px solid rgba(102, 204, 255, .9);
 width: 100%;
 z-index: 10;
 box-sizing: border-box;
}

.navbar-default {
 background: 0 0;
 border: none;
 display: block;
 margin-bottom: 0;
}

.container-fluid {
 padding: 0;
 width: 90%;
 margin: 0 auto;
}

Answer 1

喜欢这个吗？

https://jsfiddle.net/xwthov5s/

header{
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 background-color: #66CCFF;
 border-bottom: 1px solid rgba(102, 204, 255, .9);
 width: 100%;
 z-index: 10;
 box-sizing: border-box;
}

.navbar-default {
 background: 0 0;
 border: none;
 display: block;
 margin-bottom: 0;
}

.container-fluid {
 padding: 0;
 width: 90%;
 margin: 0 auto;
}
ul.navbar-nav{
    height:85px;
}
ul.navbar-nav li{
    line-height:85px;
}
.navbar-brand{
    display:block;
    height:85px;
    line-height:85px;
    padding-top: 0;
    padding-bottom: 0;
    }

    .navbar-default .navbar-nav li>a {
    color: #777;
    line-height: 85px;
    padding-top: 0;
    display:block;
    height:85px;
    padding-bottom: 0;
    }

Answer 2

如果你要调整navbar的高度，通常最好使用填充，这样你的切换按钮就会一直保持在navbar-brand的垂直居中，一旦你在768px以下。< / p>

另外，最好的方法是使用预处理器（SASS / LESS），因为它只需要一个CSS规则即可完成此操作。 Bootstrap-SASS或LESS

*我还在您的navbar和container-fluid类中添加了自定义类，因此您无需直接更改核心CSS。

请参阅代码段（整页）中的工作示例。

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #66CCFF;
  border-bottom: 1px solid rgba(102, 204, 255, .9);
  width: 100%;
  z-index: 10;
  box-sizing: border-box;
  /*REMOVE - FOR HEADER*/
  height: 40px;
  padding: 10px;
  color: white;
  /*REMOVE - FOR HEADER*/
}
.navbar.navbar-custom {
  /*REMOVE - FOR HEADER*/
  margin-top: 40px;
  border-bottom: 1px solid black;
  /*REMOVE - FOR HEADER*/
  background: 0 0;
  border: none;
  padding-top: 17.5px;
  padding-bottom: 17.5px;
  border-radius: 0;
}
.navbar.navbar-custom .navbar-header .navbar-brand {
  padding: 0;
  margin-top: -17.5px;
}
.navbar .container-fluid.container-nav {
  width: 90%;
}
@media (max-width: 767px) {
  .navbar.navbar-custom .navbar-collapse {
    border: none;
  }
  .navbar.navbar-custom .navbar-nav {
    margin-top: 20px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>I'm a Header</header>
<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid container-nav">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/100x85">
      </a>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="item"><a href="#">About</a>

        </li>
        <li id="item"><a href="#">Stats</a>

        </li>
        <li id="item"><a href="#">Drivers</a>

        </li>
        <li id="item"><a href="#">Facts</a>

        </li>
        <li id="btn"><a href="#">Pledge Now</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="well">YUP</div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
    standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
    but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
    including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
    the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
    Ipsum.</p>
</div>

将Bootstrap Navbar的高度更改为85px并使其垂直对齐

2 个答案: