Question

如何将品牌和导航栏集中在bootstrap中。另外，我如何让导航栏围绕品牌和链接停止，即包裹内容和导航栏，而不是在整个页面上展开。请看一下我刚刚添加的CSS

.navbar-default {
  background-color: #395085;
  border-color: #2a3858;
}
.navbar-default .navbar-brand {
  color: #dcdcdc;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a {
  color: #dcdcdc;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #395085;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #dcdcdc;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
  background-color: #2a3858;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #2a3858;
}
.navbar-default .navbar-toggle {
  border-color: #2a3858;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #2a3858;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #dcdcdc;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #dcdcdc;
}
.navbar-default .navbar-link {
  color: #dcdcdc;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}
.navbar-brand {
















	background-size: 1
^% auto;
	background-repeat: no-repeat;
	margin-right: 0px;
	background-clip: padding-box;
}
.container-fluid .row .col-lg-offset-1.col-lg-5 {
	margin-top: 5px;
}



@media (max-width:649px){
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #dcdcdc;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #2a3858;
  }
.navbar-toggle {
	color: #FFFFFF;
}

}

#mid_title { 
	font-size: 24px; 
	line-height: 24px; 
	font-weight: 400; 
	color: #fff; 
	margin-bottom: 10px; /* text-shadow: 2px 2px 4px #000 */; 
}

#middle_wrapper {
	

	clear: both;
	
	
	padding: 40px 15px 0; 
	overflow: hidden;
	font-size: 14px;
	color: #f4e9d9;
	background: url(/images/templatemo_middle.jpg) center top;
	
	
}

.col_allw300 { 
	float: left; 
}

.templatemo_text {
	color: #08122a; 
	font-weight: normal; 
	text-decoration: none; 
}

.lower_specs {
	
	background-color: #BFC5CE;
	
}


.sb_news_box { 
	clear: both; 
	margin-bottom: 17px; 
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Electro-Tech Inc</title>
    <!-- Bootstrap -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/etp.css" rel="stylesheet" type="text/css">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
  </head>
  <body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- 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="#defaultNavbar1"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
        <a class="navbar-brand" href="about.html">Electrotech</a></div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="defaultNavbar1">
        <ul class="nav navbar-nav justify-content-center">
          <li><a href="about.html">About Us</a></li>
          <li><a href="industries.html">Industries</a></li>
          <li><a href="products.html">Products</a></li>
          <li><a href="news.html">News</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
</div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
	<script src="js/jquery-1.11.2.min.js"></script>

	<!-- Include all compiled plugins (below), or include individual files as needed --> 
	<script src="js/bootstrap.js"></script>
  </body>
</html>

Answer 1

您可以将.navbar设置为CSS样式text-align: center，然后将.navbar-header和.navbar-collapse设置为display: inline-block。这样你的元素仍然是块元素，但它们像内联元素一样流动。

Here is a fiddle.请注意媒体查询，以便保持默认的Bootstrap响应式菜单行为。

如何在Bootstrap 3中居品牌和导航栏

1 个答案: