Question

我的标题背景颜色溢出了页面。我想知道如何调整其宽度，以使其自动填充任何屏幕尺寸而不会溢出。我认为这与“ white”类上的width属性有关，或者因为它位于容器内。基本上，由于背景颜色的扩展，它会导致水平滚动，而不仅仅是在页面的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>

Answer 1

这是没有引导程序的原始CSS，因为这是我正在使用的。
我不能保证这与Bootstrap相同。

您正在尝试使用

width: 200vw;

因为1vw相对于视口宽度的1％，所以您为内容提供的宽度是视口宽度的2倍。

width: 100vw;
margin: 0;
padding: 0;

应该使它跨越屏幕的整个宽度。您只需要确保左侧或紧侧都没有填充或空白即可。

这里有一些小点心。 https://www.w3schools.com/cssref/css_units.asp

您还可以尝试一些负边距：

.white {
    background-color: #343434;
    position: relative;
    width:100vw;
    margin: -10px;
}

应该适合您密码笔：https://codepen.io/ironlors/pen/bjYOpQ

Answer 2

使用<div class="container-fluid">代替<div class="container">

标头中溢出背景色

2 个答案: