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

似乎您的容器“容器流体”左右有15px的填充，这在您的孩子div中通过“ margin-left：-15px； margin-right：-15px”（位于类“行”）。由于您的页脚div不继承自此类，并且也是“容器流体”的子级，因此您看到的边框仅是从父级继承的。

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内，而应放在the structure is container > row > col的col内。最后但并非最不重要的是，最新boost 中的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>

并非所有的div都显示为全角

5 个答案: