laravel Bootstrap 向右和向左拉不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22642479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap pull to right and left not working
提问by user3270211
Working on bootstrap navigation. The problem i am having is to pull "Logged in as Username" all the way to right and to pull the Home (forside) all the way to left because I have more menu buttoms to put in.
致力于引导程序导航。我遇到的问题是将“以用户名登录”一直拉到右边，然后将主页（前面）一直拉到左边，因为我有更多的菜单按钮要输入。
DEMO: http://www.bootply.com/124729
演示：http: //www.bootply.com/124729
Here is the code:
这是代码：
default.blade.php
default.blade.php
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Norges Idrettsh?gskole</a> --}}
</div>
<div class="navbar-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav navbar-nav pull-left">
<li class='{{ ($aktiv == 'hvertime') ? 'active' : '' }}'> <a class='home' {{HTML::linkRoute('hvertime','Forside')}}</a> </li>
<li class='{{ ($aktiv == 'hvertredjetime') ? 'active' : '' }}'> <a class='dagligmaling' {{HTML::linkRoute('hvertredjetime','M?ling')}}</a </li>
<li class='{{ ($aktiv == 'gjoremal') ? 'active' : '' }}'> <a class='gjoremal' {{HTML::linkRoute('gjoremal','Oppgaver')}}</a> </li>
<li class='{{ ($aktiv == 'dagvakt') ? 'active' : '' }}'> <a class='dagvakt' {{HTML::linkRoute('dagvakt','Dagvakt')}}</a> </li>
<li class='{{ ($aktiv == 'kveldsvakt') ? 'active' : '' }}'> <a class='kveldsvakt' {{HTML::linkRoute('kveldsvakt','Kveldsvakt')}}</a> </li>
<li class='{{ ($aktiv == 'kontrollcm') ? 'active' : '' }}'> <a class='kontrollcm' {{HTML::linkRoute('kontrollcm','Kontroll CM')}}</a> </li>
<li class='{{ ($aktiv == 'sok') ? 'active' : '' }}'> <a class='sok' {{HTML::linkRoute('sok','S?k')}}</a> </li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
main.css
主文件
body {
<!-- min-height: 1000px; -->
padding-top: 70px;
display: inline-block;
}
li:hover::after {
content: ' ';
position: absolute;
border: solid 10px transparent;
border-top: solid 0px transparent;
border-width: 10px;
left: 50%;
margin-left: -10px;
border-color: #222 transparent transparent transparent;
}
.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
background-repeat: no-repeat;
background-position: 0 top;
content: "";
display: inline-block;
height: 32px;
margin-right: 5px;
vertical-align: middle;
width: 30px;
}
.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.home:before { background-image: url('../images/home.png'); }
.navbar-default .navbar-nav>.active>a.dagligmaling:before,
.navbar-nav>li>a.dagligmaling:before { background-image: url('../images/maling.png'); }
.navbar-default .navbar-nav>.active>a.gjoremal:before,
.navbar-nav>li>a.gjoremal:before { background-image: url('../images/tasks.png'); }
.navbar-default .navbar-nav>.active>a.dagvakt:before,
.navbar-nav>li>a.dagvakt:before { background-image: url('../images/sol.png'); }
.navbar-default .navbar-nav>.active>a.kveldsvakt:before,
.navbar-nav>li>a.kveldsvakt:before { background-image: url('../images/kveld.png'); }
.navbar-default .navbar-nav>.active>a.kontrollcm:before,
.navbar-nav>li>a.kontrollcm:before { background-image: url('../images/vaske.png'); }
.navbar-default .navbar-nav>.active>a.sok:before,
.navbar-nav>li>a.sok:before { background-image: url('../images/sok.png'); }
回答by chordol
Here is a codepenof a bootstrap navbar with elements pulled to left and right. It looks like to me that your pull-left and pull-right are nested too deep.
这是一个引导导航栏的代码笔，其中的元素被拉到左右。在我看来，你的 pull-left 和 pull-right 嵌套得太深了。
If by "all the way to the left" you mean up to edge of browser, remove the .container wrapper. Here's a forkof your example for that.
