没有侧边导航时顶部导航调整大小答案

【问题标题】：top navigation resize when no side navigation没有侧边导航时顶部导航调整大小
【发布时间】：2017-08-10 21:37:29
【问题描述】：

我在调整顶部导航的大小时遇到问题。我有两种布局 - 一种带有侧面和顶部导航，另一种带有顶部导航。当我在没有侧面导航的模板中时，我的顶部 nav 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。我知道很难看出差异，但相信我，在页面之间跳转时会很明显。例如，您可以在查看“Józio Wacławiński”中的“J”字母时注意到它

top navbar in layout.html

top navar in layout_no_navbar.html

【问题讨论】：

标签： html css django twitter-bootstrap

【解决方案1】：

我不确定我是否理解这个问题，但是...

在 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 文件中。希望能帮助到你。 :)

【讨论】：