背景颜色没有拉伸整个屏幕宽度

时间：2021-03-16 18:32:52

标签： html css

我正在为我的网站制作一个关于部分，然后我遇到了一个问题，即该部分没有覆盖页面的整个宽度，而且我在其他帖子中发现的任何内容都不适合我。如果有帮助，我正在使用 bootstrap5。

* {
    margin:0px;
    padding:0px;
    
}

.navbar {
    background: #131313;
    padding: 1rem 8rem;
    z-index: 1000;
}

.navbar-nav {
    padding-right: 9%;
}

.navbar .navbar-brand {
    font-size: 1.4rem;
    font-weight: 700;
}



#navbarSupportedContent > ul > li:nth-child(n) > a {
    color: #fff;
    font-size: 1.1rem;
    padding: 0 0.8rem;
}

#navbarSupportedContent > ul > li:nth-child(n) > a:hover {
    color: grey;
}

#navbarSupportedContent > button {
    outline: none;
    background: rgb(197, 190, 190);;
    font-weight: 600;
    padding: 0.4rem 1.4rem;
    border-radius: 30px;
}

#navbarSupportedContent > button:hover {
    background: grey;
}

.mid {
    height: 80vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
}

.mid video {
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero {
    position: relative;
}

.hero h2 {
    font-weight: bold;
}

.mid .hero p {
    width: 55%;
    font-size: 1.1rem;
    letter-spacing: 0.2px;
    padding: 1.1rem;
}

.mid .hero a {
    background: rgb(197, 190, 190);;
    font-weight: 600;
    padding: 1rem 2rem;
    border-radius: 30px;
    text-decoration: none;

}

.mid .hero a:hover {
    background: grey;
}

.about {
    background:#000;

}

.about .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: auto;
}

.about .text h2 {
    color: #F7F5F4;
    font-weight: 700;
    font-size: 2.7rem;
    letter-spacing: 2px;
}

.about .text p {
    color: #F7F5F4;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Talk Tech Teen Tech</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Talk Tech Teen Tech</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Listen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Product Specs</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Premium Techy</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Contact</a>
                  </li>
                  
                </ul>

                  <button class="btn btn-outline text-dark" type="submit">Sign Up</button>

              </div>
            </div>
          </nav>
        <div class="mid">
          <video autoplay muted loop>
            <source src="images/mic.mp4" type="video/mp4"><source>
          </video>
          <div class="hero text-center">
            <h2 class="text-light display-4">Talk Tech Teen Tech</h2>
            <p class="text-light mx-auto">This podcast talks about tech but through the eyes of grade school teens to get a different approach on the bleeding-edge of technology</p>
            <a class= text-dark href="#">Start Listening</a>
          </div>
        </div>
    </header>

    <section class="about container py-5 my-5 mx-auto">
      <div class="row align-items-center">
        <div class="img col-lg-6 col-md-6 col-12 pt-5 pb-5">
          <img class="img-fluid" src="images/mic.png">
        </div>
        <div class="text col-lg-6 col-md-6 col-12 pt-5 pb-5">
          <h2>About Us</h2>
          <p>Talk Tech Teen Tech is a podcast created by teens, made for the masses. In this podcast we talk about the bleeding edge of technology but through a teens perspective and what we think tech should be about and how companies handle technology. We talk about products from all sorts of companies (Apple, Samsung, OnePlus, Xiomi, Dell, Microsoft etc.). Our goal was to introduce another prespective of technology into the web and also to influence others that you don't need to be 30 to create a tech podcast, and with minimal gear you can create an amazing podcast!</p>
        </div>

      </div>
    </section>





<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>

这是结果

As you can see their are white bars on the sides as well as the bottom

任何帮助将不胜感激！

4 个答案:

答案 0 :(得分：3)

用该部分包裹您的容器很可能会解决问题。

而不是写这个；

<section class="about container py-5 my-5 mx-auto">

试试这个：

<section class="about py-5 my-5">
  <div class="container mx-auto">

您可能在容器周围设置了边距

您的 about 样式也应设置为 width: 100%

答案 1 :(得分：2)

看起来 container 类将最大宽度限制为小于整个页面的宽度，请参见此处：https://getbootstrap.com/docs/5.0/layout/containers/

答案 2 :(得分：0)

尝试像添加 width: 100%; 的 CSS 一样将 .mid 添加到 about 部分的 CSS。 如果这没有帮助，您可以尝试 width: 100% !important;、width: 100vw; 和 width: 100vw !important;。

答案 3 :(得分：-1)

元素缩放到其父元素的宽度。您尝试在具有一些填充的主体容器内绘制背景的元素？

相关问题
最新问题