时间戳

首页 > 解决方案 > 如何使这个自定义引导导航栏响应视口大小？

html - 如何使这个自定义引导导航栏响应视口大小？

问题描述

我有以下导航栏，它适用于我的屏幕（1300 像素宽 x 700 高）：

在我的视口最大尺寸下运行导航栏

当视口较小时，导航栏中的元素会变得疯狂：

较小视口大小的导航栏

我发现在任何典型的引导类之间切换只会导致更多的对齐和大小问题。

我试图在我的 CSS 中使用这个媒体查询，但它什么也没做：

@media only screen and (max-width: 700px) {
    .navbar .app-badge {
        display: block !important;
    }

}

我尝试了很多方法来调整引导类或使用媒体查询。没有任何效果。我需要帮助弄清楚如何使导航栏在较小的视口上折叠。

这是我的 HTML：

<nav class="navbar navbar-expand-sm navbar-spur
    {% if not current_user.admin %}navbar-spur-user {% else %} navbar-spur-admin {% endif %}">
    <div class="border rounded border-1 border-white pt-1 pl-1 even-height ml-n1 app-badge">
        <a class="navbar-nav mr-auto text-center p-1" href="https://www.spur.community/holiday-cheer-drive">
            <div class="text-center ml-n1 mt-n1">
                <div class="stacked">
                    <img src="/static/logos/logo-spur-main.png">
                </div>
                <div class="stacked">
                    <span class="text-spur-ribbon m-1"><small><b>SPUR</b></small></span>
                </div>
            </div>
        </a>
    </div>
    <div class="border rounded border-1 border-white pt-1 pl-1 ml-3 even-height app-badge">
        <a class="navbar-brand p-0" href="/" title="Home">
            <div class="parallel">
                <img src="/static/logos/logo-spur-white.png">
            </div>
            <div class="parallel">
                <span class="text-spur-red">
                    <h1>
                        <em>
                            <b>SPUR</b>
                        </em>
                    </h1>
                </span>
            </div>
            <div class="ml-1 parallel">
                <div class="mt-n2 stacked">
                    <small><span class="text-spur-green"><em>Holiday</em></span></small>
                </div>
                <div class="mt-n3 stacked">
                    <small><span class="text-spur-green"><em>Cheer</em></span></small>
                </div>
                <div class="mt-n3 stacked">
                    <small><span class="text-spur-green"><em>Drive</em></span></small>
                </div>
            </div>
            {% if current_user.admin %}
            <div class="mt-2 parallel">
                <span class="text-spur-ribbon mt-2 ml-2"><em>Admin</em></span>
            </div>
                {% endif %}
        </a>
    </div>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
            {% for url, route, label in nav_main %}
            <li class="nav-item">
                <a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
            </li>
            {% endfor %}
        </div>
        {% if current_user.admin %}
        <div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle {{ 'active' if active_page in admin_labels }}" data-toggle="dropdown"
                    href="" id="adminDropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
                <ul class="dropdown-menu" aria-labelledby="adminDropdown">
                    {% for url, route, label in nav_admin_dropdown_top %}
                    <li><a href="{{ url }}"" class=" dropdown-item">{{ label }}</a></li>
                    {% endfor %}
                    <div class="dropdown-divider"></div>
                    {% for url, route, label in nav_admin_dropdown_bottom %}
                    <li><a href="{{ url }}"" class=" dropdown-item">{{ label }}</a></li>
                    {% endfor %}
                </ul>
            </li>
        </div>
        {% endif %}
        {% if current_user.is_authenticated and nav_logged_in %}
        <div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
            {% for url, route, label in nav_logged_in %}
            <li class="nav-item">
                <a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
            </li>
            {% endfor %}
        </div>
        {% endif %}
    </ul>


    <ul class="navbar-nav m1-auto">
        {% if current_user.is_anonymous %}
        <!-- e.g., if NOT current_user.is_authenticated -->

        <div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
            {% for url, route, label in nav_anon %}
            <li class="nav-item">
                <a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
            </li>
            {% endfor %}
        </div>

        {% elif current_user.is_authenticated %}
        {% if nav_right %}
        <div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
            {% for url, route, label in nav_right %}
            <li class="nav-item">
                <a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
            </li>
            {% endfor %}
        </div>
        {% endif %}
        <div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
            <li class="nav-item">
                <a class="nav-link" href="{{ url_for('user.logout') }}">Log Out</a>
            </li>
        </div>

        {% endif %}
    </ul>

</nav>

还有我的 CSS（如果你注意到 navbar-spur-admin 类，它与 navbar-spur-user 相同，但颜色不同）：

/* NAVBAR */

/* NAVBAR */

/* NAVBAR */

/* BASE NAVBAR */

.navbar-spur, .navbar-spur .navbar-brand .navbar-nav {
    background-image: none;
    background-repeat: no-repeat;
}

.navbar-spur .navbar-brand .parallel img {
    max-width: 2.5em;
}

.navbar-spur div a img {
    max-width: 1.5em;
}

.navbar-spur .even-height {
    height: 3.7em;
}

.navbar-spur .navbar-brand small {
    font-size: 0.7em;
}

.navbar-spur a {
    text-decoration: none;
}

.navbar-spur .navbar-brand .parallel, .navbar-spur .navbar-nav .parallel {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

.navbar-spur .navbar-brand .stacked, .navbar-spur .navbar-nav .stacked {
    display: block;
}

/* USER NAVBAR */

.navbar-spur-user, .navbar-spur-user .navbar-brand .navbar-nav {
    background-color: #003274 !important;
}

.navbar-spur-user .app-badge {
    background-color: #002658 !important;
}

.navbar-spur-user .navbar-nav .nav-item .nav-link {
    color: #356275 !important;
}

.navbar-spur-user .navbar-nav .nav-item .active {
    color: white !important;
}

任何对我有帮助的建议、资源链接或反馈将不胜感激。谢谢！

标签： htmlcssbootstrap-4

解决方案

彼得，我相信您的问题与“导航栏品牌”类下的徽标宽度有关。我有一个类似的问题，但通过控制导航栏品牌下的徽标宽度来解决它。根据 bootstrap 的说法，“将图像添加到 .navbar-brand 可能总是需要自定义样式或实用程序才能正确调整大小。” 下面是引导示例：

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

注意图像后面的宽度和高度设置。在我的情况下，我能够在我的媒体查询中为小屏幕尺寸更改 CSS 中徽标图像的宽度。

推荐阅读