并非所有 div 都显示为全宽

Question

我正在尝试更改我网站的页脚，但由于某种原因，只有一些 div 显示为全宽：https://www.lpp-leicester.org.uk/。您可以看到浅蓝色 div 和深灰色 div 正确显示为全宽，但页脚的其余部分有白色边距。

我在任何类型的编码方面都是新手，所以我可能遗漏了一些明显的东西。

我不确定这个问题要包含什么代码，没有粘贴我的整个页脚文件，但这里是...

<div class="container">

            <div class="row justify-content-center">

                <img src="/wp-content/uploads/2019/01/jvj.png" style="height:130px">

            </div>

            <div class="row justify-content-center">

                <div class="col-sm-9" >

                    <div class="menuborder">
                        <div class="row">

                            <div class="col-sm-4">
                                <p style="text-align:center; vertical-align:middle; "><a style="text-decoration:underline; font-weight:bold;color:#32373C !important;" href="/privacy-policy/">Privacy Policy</a></p>
                            </div>

                             <div class="col-sm-4">
                                 <p style="text-align:center; vertical-align:middle; "><a style="text-decoration:underline; font-weight:bold;color:#32373C!important;" href="/contact/"> Contact Us</a></p>                               
                            </div>

                             <div class="col-sm-4">
                                 <p style="text-align:center; vertical-align:middle; "><a style="text-decoration:underline; font-weight:bold;color:#32373C!important;" href="/faq/">FAQ</a></p>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

                    <div class="row">
                        <div class="col-sm-12" style="margin-top:1em;">
                            <p style="text-align: center; color:#32373C">© Copyright Leicester Primary Partnership 2019 | This site is maintained by the <a style="color:#32373C !important; text-decoration:underline !important;" href="https://www.sdsa.net/">School Development Support Agency</a><p>
                        </div>
                    </div>
        </div>
    </div>

Answer 1

您的快速解决方法是将row 类添加到您的fullwidth-blue div

我刚刚在浏览器开发工具中进行了该操作，并且立即生效。

所以：

<div class="row fullwidth-blue">
... // your footer code
</div>

Answer 2

您正在使用 Flud/flex 网格系统，您必须在其中添加 row 类。您的 fullwidth-blue 容器没有此类。只需添加它即可。

<div class="row fullwidth-blue">

编辑：您的width: 100%; 打破了风格。只需将其从元素中移除即可。

.fullwidth-blue {
    background-color: #8b9694;
}

Answer 3

您的容器“container-fluid”似乎在左右两侧都有 15px 的填充，这在您的子 div 中通过“margin-left：-15px；margin-right：-15px”来平衡（在“行”类）。由于您的页脚 div 不是从此类继承的，并且也是“container-fluid”的子级，因此您看到的边框只是从父级继承而来。

Answer 4

您正在设置一个正在添加边距的容器。

你应该像这样使用你的代码：

<div class="row">
    <div class="fullwidth-blue">
        inner content
    </div>
</div>

为了让你的图片居中添加

.fullwidth-blue{
  text-align:center;
}

Answer 5

移除宽度：100%。

.fullwidth-blue {
  background-color: #8b9694; 
 }
.topBgColor {
   background-color:#9ACFD7; 
   padding:15px;
   border-bottom: 5px solid red;
   height: 70px;
   line-height: 70px;
}
.margin-bottom-10 {
  margin-bottom: 10px;
}

另外，您不应该将bg color 提供给row，而应该提供一个包装div。并且image 不应该放在row 中，而是放在col 中作为the structure is container > row > col。最后但同样重要的是，latest boostrap 中的image 有一个class to make it centered。

<div class="fullwidth-blue">
  <div class="topBgColor">
     <div class="container">
       <div class="row">
         <div class="col">
           <h3 class="text-center">Sign up for the LPP weekly newsletter here today!</h3>
         </div>
       </div>
     </div>
  </div>
  <footer>
     <div class="container">
       <div class="row">
         <div class="col">
            <img src="..." class="rounded mx-auto d-block" alt="...">
         </div>
       </div>
       <div class="row">
          <div class="col-12 col-sm-4 margin-bottom-10">...</div>
          <div class="col-12 col-sm-4 margin-bottom-10">...</div>
          <div class="col-12 col-sm-4 margin-bottom-10">...</div>
       </div>
     </div>
  </footer>
</div>