如何使左右中心的顶部导航栏对齐答案

【问题标题】：How to make top navbar alignment for left right center如何使左右中心的顶部导航栏对齐
【发布时间】：2018-06-08 13:42:31
【问题描述】：

我尝试将顶部导航栏左侧徽标和中心文本以及右侧文本设置为徽标的大小。我能够在顶部导航栏上制作左侧徽标，在顶部导航栏右侧制作文字，但无法在其他顶部导航栏的中心制作一些文字，即使面临制作右侧文字的问题（我尝试添加 clearflex）大小作为标志。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Theme CSS -->

<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"
	rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.bs-example {
	margin: 20px;
	font-weight: 700px;
}


</style>

</head>

<body>


	<!------Top navbar------------->
	<div class="navbar navbar-default navbar-fixed-top">
		<div class="container fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
					height="48" width="202" class="pull-left"></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">

				<ul class="nav navbar-nav">
					<li class="active"><a href="#"
						style="color: blue; margin-left: 6em">Ticket top displaying
							important things/ messages/ reminders/ tax dates/ Times
							reminders </a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><div class="navbar-brand">Experiencing </div></li>
					<!--    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color: blue;">First Name Last name <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <center> <li><a href="#">Logout</a></li></center>
           
          </ul>
        </li>-->
				</ul>
				<!-- /.navbar-collapse -->

			</div>

		</div>
	</div>

</body>
</html>

我试着做这样的形象：

【问题讨论】：

为什么要包含两次 Bootstrap？
您正在使用的引导程序版本的 css 似乎有些问题。如果您必须使用引导程序版本 3，那么更喜欢使用 3.3.7 版本。这是一个稳定的

标签： html css twitter-bootstrap

【解决方案1】：

添加这些样式

.navbar-default .navbar-brand {
   padding: 0;
   display: flex;
   align-items: center;
 }

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

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Theme CSS -->

<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">

<script
	src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.bs-example {
	margin: 20px;
	font-weight: 700px;
}
.navbar-default .navbar-brand {
   padding: 0;
   display: flex;
   align-items: center;
 }

</style>

</head>

<body>


	<!------Top navbar------------->
	<div class="navbar navbar-default navbar-fixed-top">
		<div class="container fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					aria-expanded="false">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#"><img src="img/logo1.jpg"
					height="48" width="202" class="pull-left"></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">

				<ul class="nav navbar-nav">
					<li class="active"><a href="#"
						style="color: blue; margin-left: 6em">Ticket top displaying
							important things/ messages/ reminders/ tax dates/ Times
							reminders </a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><div class="navbar-brand">Experiencing </div></li>
					<!--    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color: blue;">First Name Last name <span class="caret"></span></a>
          <ul class="dropdown-menu">
           <center> <li><a href="#">Logout</a></li></center>
           
          </ul>
        </li>-->
				</ul>
				<!-- /.navbar-collapse -->

			</div>

		</div>
	</div>

</body>
</html>

【讨论】：