Question

使用自举导航。我遇到的问题是将“以用户名登录”一直拉到右侧并将Home（forside）拉到左侧，因为我有更多的菜单按钮放入。

DEMO：http://www.bootply.com/124729

enter image description here

以下是代码：

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'); }

Answer 1

这是一个引导导航栏的codepen，其元素左右拉动。在我看来，你的左拉和右拉嵌套得太深了。

如果通过＆＃34;一直到左边＆＃34;你的意思是浏览器的边缘，删除.container包装器。你的榜样Here's a fork。

Bootstrap拉到右边和左边不起作用

1 个答案: