顶部导航调整大小，当无侧导航

我遇到了顶部导航大小调整的问题。我有两种布局 - 一种是侧面和顶部导航，另一种是顶部导航。当我在没有侧面导航的模板中时，我的顶级导航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

顶部导航调整大小，当无侧导航

回答

相关问题