爲什麼我的導航欄不能正確地擴展？

Question

所以這裏是我的導航欄的代碼（我使用Django，所以鏈接是動態的） 那麼，我的導航欄不會展開到最後（如果您使用漢堡包），並且我不想插入固定號碼，因爲它不起作用。

嗯，我想展開的導航欄顯示登錄。

或者我想保留登錄，但把它放在另一邊。

body { 
 
    font: 14px -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
.bild { 
 
    max-height: 600; 
 
} 
 

 
.bild img { 
 
    min-width: 20%; 
 
    max-width: 90%; 
 
    height: auto; 
 
    position: relative; 
 
    float: left; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.navbar-brand { 
 
    padding-top: 40px; 
 
} 
 

 
.username a { 
 
    color: #000000; 
 
} 
 

 
.username a:hover { 
 
    text-decoration: none; 
 
    color: #6f737a; 
 
} 
 

 
a.logo { 
 
    height: 40px; 
 
    width: 60px; 
 
    background: url(../img/Weramemesicon2.png) 50% no-repeat; 
 
    background-size: 50px 40px; 
 
    text-indent: -9999px; 
 
} 
 

 
.navbar-collapse.in { 
 
    overflow: hidden; 
 
    max-height: none !important; 
 
    height: auto !important; 
 
} 
 

 
.top-nav { 
 
    border-radius: 0px; 
 
    background: #000000; 
 
    margin: 0; 
 
} 
 

 
.navbar a { 
 
    text-align: center; 
 
    font-weight: 700; 
 
} 
 

 
.navbar a:hover, 
 
navbar a:focus { 
 
    color: #fff; 
 
} 
 

 
.general-function .search { 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-indent: -999px; 
 
    overflow: hidden; 
 
    background: url(../img/sprite.png) 0 0 no-repeat; 
 
    background-size: 420px 120px; 
 
    float: left; 
 
} 
 

 
.title { 
 
    font-size: 36px; 
 
    margin: 30px 0px; 
 
} 
 

 
.general-function { 
 
    padding: 10px; 
 
    list-style-type: none; 
 
} 
 

 
.function-wrap { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.search.selected, 
 
.search:hover { 
 
    background: url(../img/sprite.png) 0 -30px no-repeat; 
 
    background-size: 420px 120px; 
 
} 
 

 
.visitor-function { 
 
    padding: 9px 10px; 
 
    float: right; 
 
    display: inline-block; 
 
    color: #bbb; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    padding: 0 12px; 
 
    text-decoration: none; 
 
} 
 

 
.visitor-function li { 
 
    padding: 9px 10px; 
 
    float: right; 
 
    display: inline-block; 
 
    color: #bbb; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    padding: 0 12px; 
 
} 
 

 
.user-function .btn-mute, 
 
.visitor-function .btn-mute { 
 
    display: inline-block; 
 
    color: #bbb; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    padding: 0 12px; 
 
    text-decoration: none; 
 
    margin-top: 0; 
 
} 
 

 
.user-function .btn-primary, 
 
.visitor-function .btn-primary { 
 
    color: #fff; 
 
    display: inline-block; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    padding: 0 16px; 
 
    border-radius: 2px; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    margin-left: 10px; 
 
    text-decoration: none; 
 
} 
 

 
@media (max-width: 767px) { 
 
    .navbar.navbar-custom .navbar-nav { 
 
    text-align: center; 
 
    } 
 
    .navbar.navbar-custom .navbar-nav>li { 
 
    font-size: 32px; 
 
    } 
 
    .navbar .navbar-custom .navbar-nav>li:not (:first-child) { 
 
    right: 90 px; 
 
    } 
 
    .navbar.navbar-custom .navbar-nav>li { 
 
    border-bottom: 1px solid #eee; 
 
    } 
 
    .navbar.navbar-custom a.btn.navbar-btn.btn-sign { 
 
    padding: 7.5px 15px; 
 
    font-size: 20px; 
 
    } 
 
    .navbar.navbar-custom .signin { 
 
    float: none; 
 
    clear: both; 
 
    position: relative; 
 
    right: 0; 
 
    } 
 
} 
 

 
.twitter { 
 
    padding: 4px; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-indent: -999px; 
 
    background: #3b5998 url(../img/Sprites.png) -1.4px -2px no-repeat; 
 
    background-size: 320px 30px; 
 
    border-radius: 50%; 
 
} 
 

 
.twitter:hover { 
 
    padding: 4px; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-indent: -999px; 
 
    background: #3b5998 url(../img/Sprites.png) 1.4px 1.4px no-repeat; 
 
    background-size: 320px 30px; 
 
    border-radius: 50%; 
 
} 
 

 
.facebook { 
 
    padding: 4px; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-indent: -999px; 
 
    background: #3b5998 url(../img/Sprites.png) -30.2px -2px no-repeat; 
 
    background-size: 320px 30px; 
 
    border-radius: 50%; 
 
} 
 

 
.facebook:hover { 
 
    padding: 4px; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-indent: -999px; 
 
    background: #3b5998 url(../img/Sprites.png) -27.9px 1.4px no-repeat; 
 
    background-size: 320px 30px; 
 
    border-radius: 50%; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!DOCTYPE html> 
 
<title>Testingsite </title> 
 

 
<body> 
 
    <header> 
 
    <nav class="navbar top-nav navbar-top navbar-inverse"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <a class="logo navbar-brand" href="{% url 'home' %}">Wera</a> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navi" aria-expanded="false"> \t <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="navi"> 
 
      <ul class="nav navbar-nav custom-nav"> 
 
      <li><a href="#"> Hot </a></li> 
 
      <li><a href="#"> Trending </a></li> 
 
      <li><a href="{% url 'posts:all' %}"> Fresh </a></li> 
 
      <li><a href="{% url 'groups:all' %}"> Groups \t </a></li> 
 
      </ul> 
 
      <div class="visitor-function row"> 
 
      <ul class="navbar navbar-nav custom-nav general-function navbar-right"> 
 
       <a href="#" class="search">search</a> 
 
       <a class="btn-mute " href=" {% url 'accounts:login' %} ">Login</a> 
 
       <a class="btn-primary " href=" {% url 'accounts:signup' %}">Sign up</a> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </header> 
 
    <div class="container"> 
 

 
    </div> 
 
</body>

Answer 1

試試這個：

@media (max-width: 768px) { 
.visitor-function { 
    height: auto; 
} 
}