html - 标题中溢出的背景颜色

问题描述

我的页眉背景颜色溢出页面。我想知道如何调整它的宽度，以便它自动填充任何屏幕尺寸而不会溢出。我认为这与我在“白色”类上的宽度属性有关，或者因为它在容器内。基本上，由于背景颜色的扩展，它会导致水平滚动，而不是仅仅停留在页面的 100% 宽度处。感谢我为此获得的任何帮助，非常感谢。

    .white {
        background-color: #fff;
        position: relative;
    }
    
    .white:before {
        content: "";
        background-color: #fff;
        position: absolute;
        height: 100%;
        width: 200vw;
        left: -100vw;
        z-index: -1;
    }

  <div class="container">
        <nav class="navbar navbar-light navbar-expand-lg white row">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <!-- Logo -->
                <div class="logo">
                    <a href="#" class="navbar-brand">
                        <img src="{% static 'accounts/logo/logo.png' %}" height="40" width="40">
                    </a>
                </div>

                <!-- Search Box -->
                <div class="search_wrapper">
                    <input type="text" placeholder="Search" class="search_input">
                    <button class="search_button">&#128269;</button>
                </div>

                <!-- Nav List -->
                <ul class="navbar-nav ml-auto">
                    <span class="middle">
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <img src="{% static 'accounts/blah/blah.png' %}" height="20" width="20" id="home"> Random
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <img src="{% static 'accounts/blah/blah.png' %}" height="20" width="20" id="lessons"> Random
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <img src="{% static 'accounts/blah/blah.png' %}" height="30" width="30" id="teacher"> Random
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <img src="{% static 'accounts/icons/blue.png' %}" height="20" width="30" id="msg"> Random
                            </a>
                        </li>
                    </span>

                    <!-- Avatar Dropdown -->
                    <span class="right">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                                <img src="{% static 'accounts/blah/blah.png' %}" height="30" width="25"> Blah
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Random</a>
                                <a class="dropdown-item" href="#">Random</a>
                                <a class="dropdown-item" href="#">Random</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Random</a>
                            </div>
                        </li>
                    </span>
                </ul>
            </div>

        </nav>

标签： htmlcsstwitter-bootstrap

html - 标题中溢出的背景颜色

问题描述

解决方案

推荐阅读