CSS

Question

出于某种原因，我的 html 和 css 没有占据页面的整个宽度，即使我将边距和填充设置为 0，宽度设置为 100%。以前一直有效，但我不知道为什么这次不起作用。到目前为止唯一实现的就是背景和导航栏。我附上了一张图片来演示它现在的样子。任何帮助将不胜感激。

    *{
       margin: 0;
       padding: 0;
       width: 100%;
       box-sizing: border-box;
       font-family: sans-serif;
    }
 
    body{
       overflow-x: hidden;
    }

    .container{
       width: 100%;
       height: 100vh;
       background: #42455a;
    }

    .navbar ul{
       display: inline-flex;
       margin: 50px;
    }

    .navbar ul li{
       list-style: none;
       margin: 0px 20px;
       color: #b2b1b1;
       cursor: pointer;
    }

    .logo img{
       width: 30px;
       margin-top: -7px;
       margin-right: 48px;
    }

    .active{
       color: #19dafa !important;
    }

<!DOCTYPE html>
    <html>
    <head>

    <!-- CSS Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <!-- CSS File -->
    <link rel="stylesheet" type="text/css" href="check.css">

    <title>Webpage title</title>
    </head>
    <body>

    <div class="container">
        <div class="navbar">
            <ul>
                <!-- logo -->
                <li class="logo"><img src=""></li> 
                <li class="active">Home</li>
                <li>Services</li>
                <li>Product</li>
                <li>Contact</li>
            </ul>
        </div>
        
    </div>

    </body>
    </html>

Answer 1

您正在使用 Bootstrap.css，当浏览器视口宽度大于 576px:[=17 时，它会在具有 class="container" 的任何元素上定义 max-width: 540px 规则=]

要解决此问题，请使用 container 以外的其他 class 名称，或者在您自己的样式表中扩展 .container 规则以设置 max-width: none;.

但是，坦率地说，最好的解决方案是不使用 Bootstrap.css，而是负责设计您自己网站的样式。我觉得这些年来 Bootstrap 变得越来越大，“学习 Bootstrap” 和学习如何编写自己的基本通用样式表一样需要付出同样的努力。

CSS - Div 未占据整个宽度

CSS - Div not taking up entire width

html

frontend

web-frontend