在我的 class 那就是容器流体中，我可以对顶部和底部进行填充，但它对右侧和左侧不起作用？

Question

我正在使用 bootstrap-5。我找不到解决方案。这怎么能适用于顶部和底部，而不适用于右侧和左侧？你能帮我么？好的，默认情况下，bootstrap 可能有一个值，但我正在 css 上更改它。所以我认为我在那里写的东西一定有用。我怎样才能让它发挥作用？

#title {
  background-color: #ff4c68;
}

.container-fluid {
  padding: 3% 15%;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;
  font-size: 3rem;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link rel="stylesheet" href="css/styles.css">
  <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">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">
</head>

<body>

  <section id="title">
    <div class="container-fluid">

      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg  navbar-dark">

        <a class="navbar-brand" href="">Company</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">

          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>


            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>

          </ul>
        </div>


      </nav>




      <!-- Title -->

      <div class="row">
        <div class="col-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button">Download</button>
          <button type="button">Download</button>
        </div>

        <div class="col-lg-6">
          <img src="images/iphone6.png" alt="iphone-mockup">
        </div>



      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">

    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>

    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>

    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>

  </section>


  <!-- Testimonials -->

  <section id="testimonials">

    <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
    <img src="images/dog-img.jpg" alt="dog-profile">
    <em>Pebbles, New York</em>

  </section>


  <!-- Press -->

  <section id="press">
    <img src="images/techcrunch.png" alt="tc-logo">
    <img src="images/tnw.png" alt="tnw-logo">
    <img src="images/bizinsider.png" alt="biz-insider-logo">
    <img src="images/mashable.png" alt="mashable-logo">

  </section>


  <!-- Pricing -->

  <section id="pricing">

    <h2>A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>


    <h3>Chihuahua</h3>
    <h2>Free</h2>
    <p>5 Matches Per Day</p>
    <p>10 Messages Per Day</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Labrador</h3>
    <h2> / mo</h2>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Mastiff</h3>
    <h2> / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>

  </section>


  <!-- Call to Action -->

  <section id="cta">

    <h3>Find the True Love of Your Dog's Life Today.</h3>
    <button type="button">Download</button>
    <button type="button">Download</button>

  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright 2018 TinDog</p>

  </footer>
</body>

</html>

Answer 1

尝试bootstrap类例如m-1,px-1,m-2等...

<div class="container-fluid px-1 py-3">

或

.container-fluid {
    padding: 3% 15% !important;
}

Answer 2

这是因为CSS没有覆盖默认的bootstrap css..

所以使用下面给出的代码并覆盖

#title {
  background-color: #ff4c68;
}

.container-fluid {
  padding: 3% 15% !important;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.5;
  font-size: 3rem;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>TinDog</title>
  <link rel="stylesheet" href="css/styles.css">
  <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">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">
</head>

<body>

  <section id="title">
    <div class="container-fluid">

      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg  navbar-dark">

        <a class="navbar-brand" href="">Company</a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">

          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>


            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>

          </ul>
        </div>


      </nav>




      <!-- Title -->

      <div class="row">
        <div class="col-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button">Download</button>
          <button type="button">Download</button>
        </div>

        <div class="col-lg-6">
          <img src="images/iphone6.png" alt="iphone-mockup">
        </div>



      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">

    <h3>Easy to use.</h3>
    <p>So easy to use, even your dog could do it.</p>

    <h3>Elite Clientele</h3>
    <p>We have all the dogs, the greatest dogs.</p>

    <h3>Guaranteed to work.</h3>
    <p>Find the love of your dog's life or your money back.</p>

  </section>


  <!-- Testimonials -->

  <section id="testimonials">

    <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
    <img src="images/dog-img.jpg" alt="dog-profile">
    <em>Pebbles, New York</em>

  </section>


  <!-- Press -->

  <section id="press">
    <img src="images/techcrunch.png" alt="tc-logo">
    <img src="images/tnw.png" alt="tnw-logo">
    <img src="images/bizinsider.png" alt="biz-insider-logo">
    <img src="images/mashable.png" alt="mashable-logo">

  </section>


  <!-- Pricing -->

  <section id="pricing">

    <h2>A Plan for Every Dog's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>


    <h3>Chihuahua</h3>
    <h2>Free</h2>
    <p>5 Matches Per Day</p>
    <p>10 Messages Per Day</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Labrador</h3>
    <h2> / mo</h2>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>


    <h3>Mastiff</h3>
    <h2> / mo</h2>
    <p>Pirority Listing</p>
    <p>Unlimited Matches</p>
    <p>Unlimited Messages</p>
    <p>Unlimited App Usage</p>
    <button type="button">Sign Up</button>

  </section>


  <!-- Call to Action -->

  <section id="cta">

    <h3>Find the True Love of Your Dog's Life Today.</h3>
    <button type="button">Download</button>
    <button type="button">Download</button>

  </section>


  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright 2018 TinDog</p>

  </footer>
</body>

</html>

Answer 3

您的代码将在 bootstrap 版本 4 中运行。我猜您看过 Angela Yu 的网络训练营只是添加 !important css 没有覆盖默认值 css

.container-fluid{
  padding: 3% 15% !important;
  }

在我的 class 那就是容器流体中，我可以对顶部和底部进行填充，但它对右侧和左侧不起作用？

In my class thats container-fluid, I can do padding for top and bottom, but it doesn't work for right and left?

css

bootstrap-5