0
如何在自舉中集中品牌和導航欄。另外，如何在品牌和鏈接周圍安裝導航欄，即圍繞內容和導航欄，而不是在整個頁面上展開。請大家看看自舉中的中心品牌和導航欄3.4
.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 {
\t background-size: 1
^% auto;
\t background-repeat: no-repeat;
\t margin-right: 0px;
\t background-clip: padding-box;
}
.container-fluid .row .col-lg-offset-1.col-lg-5 {
\t 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 {
\t color: #FFFFFF;
}
}
#mid_title {
\t font-size: 24px;
\t line-height: 24px;
\t font-weight: 400;
\t color: #fff;
\t margin-bottom: 10px; /* text-shadow: 2px 2px 4px #000 */;
}
#middle_wrapper {
\t
\t clear: both;
\t
\t
\t padding: 40px 15px 0;
\t overflow: hidden;
\t font-size: 14px;
\t color: #f4e9d9;
\t background: url(/images/templatemo_middle.jpg) center top;
\t
\t
}
.col_allw300 {
\t float: left;
}
.templatemo_text {
\t color: #08122a;
\t font-weight: normal;
\t text-decoration: none;
}
.lower_specs {
\t
\t background-color: #BFC5CE;
\t
}
.sb_news_box {
\t clear: both;
\t margin-bottom: 17px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
\t <meta http-equiv="X-UA-Compatible" content="IE=edge">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electro-Tech Inc</title>
<!-- Bootstrap -->
\t <link href="css/bootstrap.css" rel="stylesheet">
\t <link href="css/etp.css" rel="stylesheet" type="text/css">
\t <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
\t <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
\t <!--[if lt IE 9]>
\t \t <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
\t \t <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
\t \t <![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) -->
\t <script src="js/jquery-1.11.2.min.js"></script>
\t <!-- Include all compiled plugins (below), or include individual files as needed -->
\t <script src="js/bootstrap.js"></script>
</body>
</html>CSS我只是說