Question

我对bootstrap和html / css相对较新，到目前为止我一直相处得很好。我一直试图做的是将导航栏的高度增加到80px。我的问题是，现在我无法将导航栏的内容集中在一起，它们太高了。

看起来像这样：https://gyazo.com/4ba22961033e9bafa13aac44a50de3f6

谢谢：）

这是我的整个CSS代码：

<!DOCTYPE html>
<html lang="en">

<head>

  <!-- Bootstrap required meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Links to stylesheets and scripts -->  
  <link href="style.css" type="text/css" rel="stylesheet"> 
  <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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
  <title>Test</title>
  
</head>

<body>

<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Leaderboards</a></li>
      <li><a href="#">Support</a></li>
	  
	<li class="dropdown">
	  <a class "dropdown-toggle" data-toggle="dropdown" href="#">(username&pp)
	  <span class="caret"></span></a>
	  <ul class="dropdown-menu">
	    <li><a href="#">Settings</a></li>
		<li><a href="#">Statistics</a></li>
		<li><a href="#">History</a></li>
		<li><a href="#">Logout</a></li>
		
	  </ul>
	</li>
	
    </ul>
  </div>
</nav>

</body>

</html>

HTML：

select table_name from qsys2.systables where table_schema = 'LIBRARY'

Answer 1

尝试在.navbar-nav > li > a CSS块中添加以下flex属性：

display: flex;
align-items: center;

所以.navbar-nav > li > a块现在应该是这样的：

.navbar-nav > li > a {
  display: flex;
  align-items: center;  
  height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  border-left: 1px solid #e7e7e7;
}

<强> CodePen Demo

Answer 2

我想我遇到了问题（可能是）...使用这个css代码...我认为这正是你需要的

.navbar.navbar-default {
        min-height: 80px;
    }
    .container-fluid {
        margin-top: 15px;
    }

更改字体大小会更改.navbar-header和.navbar-brand

的更改方式

Bootstrap Navbar内容不居中

2 个答案: