[英]bootstrap navbar elements too much in the center
I'm using bootstrap to build a navbar for my page, but am finding that the elements are too bunched towards the center, leaving a lot of extra space to the sides. 我正在使用bootstrap为我的页面构建一个导航栏,但我发现这些元素在中心位置过于紧张,为侧面留下了很多额外的空间。 Is there a way to extend these more to take advantage of the extra width of the page? 有没有办法扩展这些以利用页面的额外宽度?
Here is my HTML/CSS. 这是我的HTML / CSS。 Basically took Example 6 from https://codepen.io/bootstrapped/pen/KwYGwq?editors=1100 基本上从https://codepen.io/bootstrapped/pen/KwYGwq?editors=1100获取了示例6
HTML: HTML:
<nav class="navbar navbar-inverse navbar-fixed-top example6">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
<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 text-hide" href="/fedhr/Fed_Splash_New.do"/>
</div>
<div id="navbar6" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/fedhr/Fed_Splash_New.do"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a href="#Profile"><span class="glyphicon glyphicon-user"></span>$[SP] <g:no_escape>${jvar_user_name}</g:no_escape> <g:no_escape>${jvar_user_lastname}</g:no_escape></a></li>
<li><a href="#Tasks"><span class="glyphicon glyphicon-list-alt"></span>$[SP] Tasks</a></li>
<li><a href="#About"><span class="glyphicon glyphicon-plane"></span>$[SP] About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-phone-alt"></span>$[SP] Contact Us <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="mailto:someone@example.com?Subject=Hello%20again">Email Us</a></li>
<li><a href="/$chat_support.do?queueID=cd846e1747a102009eaff6df1d9a7175" target="_blank">Chat with HR</a></li>
</ul>
</li>
<li><a href="../logout.do"><span class="glyphicon glyphicon-log-out"></span>$[SP] Logout</a></li>
</ul>
</div>
</div>
</nav>
CSS: CSS:
.example6 .navbar-brand{
background: url(#) center / contain no-repeat;
width: 200px;
}
You can use the property margin-right
inside the the .navbar-right class. 您可以在.navbar-right类中使用margin-right
属性。 But be aware that your <ul>
will overflow the container parent class. 但请注意,您的<ul>
将溢出容器父类。
.navbar-right {
float: right!important;
margin-right: -20px;
}
the <div class="container">
sets the width of the content inside to a fixed width that depends on the viewport width (see http://getbootstrap.com/css/#overview-container ) . <div class="container">
将内容的宽度设置为取决于视口宽度的固定宽度(请参阅http://getbootstrap.com/css/#overview-container )。 To let the content stretch to the full available width, change it into <div class="container-fluid">
要让内容扩展到完整的可用宽度,请将其更改为<div class="container-fluid">
Use <div class="container-fluid">
, not <div class="container">
. 使用<div class="container-fluid">
,而不是<div class="container">
。
This way it will adapt to the available width of the viewport. 这样它将适应视口的可用宽度。
More on: Container-fluid vs .container 更多信息: 容器流体与容器
its because ".container" class adds margin on both sides. 因为“.container”类增加了双方的保证金。 instead use ".container-fluid" class on line 2 of your html 而是在你的HTML的第2行使用“.container-fluid”类
<div class="container-fluid">
i think you are viewing it in a high resolution monitor. 我认为你是在高分辨率显示器上观看它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.