如何在 bootstrap 容器内为宽度为 100% 的导航栏着色

Question

<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Landing Page</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <!-- Place favicon.ico in the root directory -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>
  <style type="text/css" media="screen">
    .flex-even {
      flex: 1;
    }

    .hero,
    .navbar {
      background-color: #1f2937;
      color: #f9faf8;
    }
  </style>

  <body>
    <div class="container">
      <div class="navbar">
        <div class="logo">Header Logo</div>
        <div class="navbar-items">
          <a href="#">header link one</a>
          <a href="#">header link two</a>
          <a href="#">header link three</a>
        </div>
      </div>

      <div class="hero d-flex">
        <div class="flex-even">
          <h1>This website is awesome</h1>
          <p>
            This website has some subtext that goes here under the main title.
            It's a smaller font and the color is lower contrast
          </p>
          <button class="btn btn-primary">Sign up</button>
        </div>
        <div class="flex-even">
          <img src="https://via.placeholder.com/350x150" />
        </div>
      </div>

      <div>
        <h2 class="fw-bold text-center">Some random information</h2>
        <div class="d-flex">
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
        </div>
      </div>

      <div>
        <p>
          This is an inspiring quote, or a testimonial from a customer. Maybe
          it's just filling up space, or maybe people will actually read it. Who
          knows? All I know is that it looks nice.
        </p>
        <p class="fw-bold">-Thor, God of Thunder</p>
      </div>

      <div class="d-flex bg-primary text-white p-3 rounded">
        <div>
          <p class="fw-bold">Call to action! It's time!</p>
          <p>
            Sign up for our product by clicking that button right over there
          </p>
        </div>
        <div>
          <button class="btn btn-light">Sign up</button>
        </div>
      </div>
    </div>
  </body>
</html>

我希望外部每个元素的宽度 div 是整页宽度 100% 像这样 https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png

我尝试使用 class container-fluid 但文本不会在容器内

Answer 1

您可以结合使用 container-fluid 和容器：

<div class="container-fluid navbar">
    <div class="container">
        ...
    </div>
</div>

如何在 bootstrap 容器内为宽度为 100% 的导航栏着色

How to color navbar with width 100% while inside bootstrap container

html

css

twitter-bootstrap