如何在Bootstrap 3中將品牌和導航欄居中
[英]How to center brand and navbar in Bootstrap 3
問題描述
如何在引導程序中同時定位品牌和導航欄。 還有如何讓導航欄停在品牌和鏈接周圍，即環繞內容和導航欄，而不是在整個頁面上延伸。 請看看我剛剛添加的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>
1 個解決方案
解決方案1
0 2017-07-19 12:17:15
您可以將.navbar設置為CSS樣式text-align: center ，然后將.navbar-header和.navbar-collapse為display: inline-block 。 這樣，您的元素仍然是塊元素，但是它們像內聯元素一樣流動。
這是一個小提琴。 請注意媒體查詢，以便保留默認的Bootstrap響應菜單行為。
僅在顯示漢堡菜單時，如何使用Bootstrap將品牌帶到Navbar的中心？
[英]How to bring the Brand to the center of Navbar using Bootstrap only when the hamburger menu shows up?
Bootstrap navbar：左側的品牌 - 右側登錄 - 中心的可折疊菜單
[英]Bootstrap navbar: brand on left - login on right - collapsible menu on center
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.