如何打破 Bootstrap 容器元素中的颜色框？

Question

所以我尝试了这里（以及网络上其他地方）提供的一些解决方案，看看我是否可以摆脱引导容器，但我没有任何运气。为了描述它，我有一个.fluid-container 在普通.container 后面放置一个全角背景。事情变得棘手的是我需要.container 中的第一列突破并一直延伸到屏幕的左边缘。

它应该是什么样子：

我得到它做什么：

这是我的 HTML：

<div class="container-fluid bg-darkblue bg-image-footer py-5">
        <div class="container">
            <div class="row" id="footer-content">
                <div class="col-5 px-0 py-3 bg-limegreen">
                    Form content goes here.
                </div>
                <div class="col-1">&nbsp;</div>
                <div class="col-2 text-white">
                    <p class="avenir text-limegreen text-upper">Contact Us</p>
                    <p>(202) 555-1212</p>
                    <p>email@email.com</p>
                    <p>New York, NY</p>
                </div>
                <div class="col-2">
                    <p class="avenir text-limegreen text-upper">Client Name</p>
                    <p>About</p>
                    <p>Careers</p>
                    <p>Accessibility</p>
                </div>
                <div class="col-2">
                    <p class="avenir text-limegreen text-upper">Social</p>
                </div>
            </div>
        </div>
    </div>

重申一下——这里的目标是将浅绿色框的左边缘一直移动到屏幕的左边缘，而不会将右边缘移出网格系统或与布局的其余部分发生冲突.

所有 CSS 都是简单的 Bootstrap 5，除了一些控制颜色的东西，比如 .bg-limegreen。

Answer 1

引导布局永远不应该有立即嵌套的容器。相反，使用标准行/列嵌套。除非您确实需要跨列重叠，否则请避免尝试“突破”任何内容。这种情况很少见。

另外请注意，我用现有的 Bootstrap 类（text-light 和 text-uppercase）替换了您的一些自定义类。明智的做法是了解 Bootstrap 提供的功能，以避免产生多余的 CSS 技术债务。请参阅 Bootstrap 的 text utilities。

我还鼓励您覆盖 Bootstrap 的 semantically-named 颜色类，而不是创建新的非语义类。例如，text-limegreen 可能会替代text-success，即使只是用于页脚。看看 Bootstrap 的color utilities。

.bg-darkblue {
  background: darkblue;
}

.bg-limegreen {
  background: limegreen;
}

.text-limegreen {
  color: limegreen;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-fluid bg-darkblue bg-image-footer py-5">
  <div class="row" id="footer-content">
    <div class="col-5 px-0 py-3 bg-limegreen">
      <div class="row justify-content-end">
        <div class="col-8 text-light">
          Form content goes here.
        </div>
      </div>
    </div>

    <div class="col-1"></div>

    <div class="col-6">
      <div class="row justify-content-start text-light pt-2">
        <div class="col-3">
          <p class="avenir text-limegreen text-uppercase">Contact Us</p>
          <p>(202) 555-1212</p>
          <p>email@email.com</p>
          <p>New York, NY</p>
        </div>

        <div class="col-3">
          <p class="avenir text-limegreen text-uppercase">Client Name</p>
          <p>About</p>
          <p>Careers</p>
          <p>Accessibility</p>
        </div>

        <div class="col-3">
          <p class="avenir text-limegreen text-uppercase">Social</p>
        </div>
      </div>
    </div>
  </div>