頂部導航調整大小，當無側導航

我遇到了頂部導航大小調整的問題。我有兩種佈局 - 一種是側面和頂部導航，另一種是頂部導航。當我在沒有側面導航的模板中時，我的頂級導航li元素正在調整大小，並且它們稍微大一點，然後在兩個導航欄的主佈局中放大。我不知道爲什麼會發生這種情況，因爲兩種佈局都使用相同的'topnav.html'模板，而且CSS也是一樣的。我使用引導程序3，我想知道如果引導程序網格是應該責備的。我嘗試在layout_no_navbar.html中添加與layout.html模板中相同的div結構，但它不起作用。我的目標是在兩種佈局中保持相同的頂部導航li大小。請幫忙！頂部導航調整大小，當無側導航

這是我的主要佈局與這兩個導航欄部分（的layout.html）：

<div class="row"> 
    <div class="col-md-3"> 
     {% include 'portal/layout/navbar.html' %} 
    </div> 
    <div class="col-md-9"> 
     <div class="content-container"> 
      <!-- Navigation --> 
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      {% include 'portal/layout/topnav.html' %} 
      </nav> 

      <div id="page-wrapper"> 
        {% for message in messages %} 
         <div class="alert {{ message.tags }} alert-dismissible" role="alert"> 
         <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
         </button> 
         {{ message }} 
         </div> 
        {% endfor %} 

        {% block content %} 
        {% endblock %} 
      </div> 
      <!-- /#page-wrapper content-container --> 
     </div> 
    </div> 
</div>

這裏有沒有副作用導航欄的佈局（layout_no_navbar.html）：在這兩種佈局

<div> 
    {% include 'portal/_user_edit_modal.html' %} 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <!-- Navigation --> 
     {% include 'portal/layout/topnav.html' %} 
    </nav> 

     {% for message in messages %} 
      <div class="alert {{ message.tags }} alert-dismissible" role="alert"> 
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      {{ message }} 
      </div> 
     {% endfor %} 

     {% block content %} 
     {% endblock %} 
</div>

我有：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

這裏是兩個頂級導航欄在不同佈局的圖片。例如，layout.html中的「註銷」大小爲：104.8 x 50，layout_no_navbar.html中的頂級導航欄中爲107.5 x 50.我知道很難看出差異，但相信我，在頁面之間跳轉時顯而易見。對於examle，你可以看到它，而在尋找 'J' 在 'JózioWacławiński'

top navbar in layout.html

top navar in layout_no_navbar.html

來源

2017-08-10 Marysia

信我不知道我理解的問題，但...

在layout_no_navbar.html中，您尚未將topnav.html包裝在內，因此它需要的寬度大於layout.html中的寬度。所以，你可以這樣做：

<div> 
{% include 'portal/_user_edit_modal.html' %} 
<div class="row"> 
    <div class="col-md-9 col-md-offset-3"> 
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <!-- Navigation --> 
     {% include 'portal/layout/topnav.html' %} 
     </nav> 
    </div> 
</div> 
    {% for message in messages %} 
     <div class="alert {{ message.tags }} alert-dismissible" role="alert"> 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     {{ message }} 
     </div> 
    {% endfor %} 

    {% block content %} 
    {% endblock %} 
</div>

在你layout_no_navbar.html文件。希望它有幫助。 :)

來源

2017-08-10 22:26:58 denic

頂部導航調整大小，當無側導航

回答

相關問題