Question

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

＆＃13;

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

＆＃13;

我试图像这样做：

I tried to do like this image

Answer 1

添加这些样式

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

＆＃13;

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

＆＃13;

如何为左右中心制作顶部导航栏对齐方式

1 个答案: