Bootstrap 3.3.6导航栏浮动到中心
我正在使用固定在页面顶部的引导程序导航栏（要遵循的代码）。我宁愿限制宽度并使其居中以适应内容，而不是让导航栏跨越桌面上的整个页面。虽然我可以限制宽度，但是在做完之后我无法弄清楚如何使它居中;它只是挂在左边。到目前为止，我所有的搜索都没有结果。大多数人似乎想要链接，这不是我的问题。
以下是网站现在的样子（左侧的Navbar）
这就是我喜欢看的方式（或多或少）：
这是我当前的代码（我认为是相关部分）：
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="10" style="background-color: #FFF;">
<nav class="navbar navbar-default navbar-fixed-top" style="max-width:950px;">
<div class="container-fluid" style="background-color: #FFF; width: 100%; padding-top: 15px;text-align: center;">
<div style="display: inline;padding-right: 10px;">
<a href="#"><img src="/images/logo.png" style="position: relative; top: -12px;" /></a>
</div>
<div style="display: inline;">
<div class="dropdown" style="display: inline;">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Welcome, [NAME] <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-user"></span> My Profile</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages <span class="badge pull-right">5</span></a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-usd"></span> Make A Payment</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="/?Action=Logoff" ><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>
</ul>
</div>
</div>
<div class="slogan" style="float: none;display:inline;white-space: nowrap;">[HEADER TEST]</div>
</div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed pull-left" 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="/images/logo.png" style="position: relative; top: -15px;height: 50px;"/></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="#">Dashboard</a></li-->
<li><a href="/Dashboard.asp">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li>
<a href="#">Marketing </a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 3 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 5 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<div style="display: inline;position: relative; top: 10px;" class="SearchForm">
<div style="margin-right: 20px;" class="SearchForm">
<form method="get" action="search" style="display: inline;">
<input class="search_field" type="text" style=" margin: 0px;float: none; min-width: 22px; width: 22px;"
onFocus="this.style.width='150px';" onblur="this.style.width='22px';" />
</form>
</div>
<a href="#" target="_blank">
<img src="/images/social/facebook.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
<a href="#" target="_blank">
<img src="/images/social/twitter.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
<a href="#" target="_blank">
<img src="/images/social/linkedin.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
1 个答案:
答案 0 :(得分：0)
将margin: auto;添加到导航div
＆＃13;
＆＃13;
＆＃13;
＆＃13;
nav{
margin: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body data-spy="scroll" data-target=".navbar" data-offset="10" style="background-color: #FFF;">
<nav class="navbar navbar-default navbar-fixed-top" style="max-width:950px;">
<div class="container-fluid" style="background-color: #FFF; width: 100%; padding-top: 15px;text-align: center;">
<div style="display: inline;padding-right: 10px;">
<a href="#"><img src="/images/logo.png" style="position: relative; top: -12px;" /></a>
</div>
<div style="display: inline;">
<div class="dropdown" style="display: inline;">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Welcome, [NAME] <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-user"></span> My Profile</a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-envelope"></span> Messages <span class="badge pull-right">5</span></a>
</li>
<li role="presentation">
<a href="#"><span class="glyphicon glyphicon-usd"></span> Make A Payment</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a href="/?Action=Logoff" ><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>
</ul>
</div>
</div>
<div class="slogan" style="float: none;display:inline;white-space: nowrap;">[HEADER TEST]</div>
</div>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed pull-left" 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="/images/logo.png" style="position: relative; top: -15px;height: 50px;"/></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="#">Dashboard</a></li-->
<li><a href="/Dashboard.asp">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li>
<a href="#">Marketing </a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 2 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 3 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MENU 5 <span class="caret"></span></a>
<ul class="dropdown-menu">
[MENU]
</ul>
</li>
<div style="display: inline;position: relative; top: 10px;" class="SearchForm">
<div style="margin-right: 20px;" class="SearchForm">
<form method="get" action="search" style="display: inline;">
<input class="search_field" type="text" style=" margin: 0px;float: none; min-width: 22px; width: 22px;"
onFocus="this.style.width='150px';" onblur="this.style.width='22px';" />
</form>
</div>
<a href="#" target="_blank">
<img src="/images/social/facebook.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
<a href="#" target="_blank">
<img src="/images/social/twitter.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
<a href="#" target="_blank">
<img src="/images/social/linkedin.png" style="border: 0px;background-color: #FFFFFF;border-radius:15px;"/>
</a>
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？