为啥页脚没有归档全屏宽度 html/Bootstrap 5

Posted 2023-03-21

【中文标题】为啥页脚没有归档全屏宽度 html/Bootstrap 5

【英文标题】：Why is footer not filing the full screen width html/Bootstrap 5为什么页脚没有归档全屏宽度 html/Bootstrap 5

【发布时间】：2021-05-23 19:17:02

【问题描述】：

无论我尝试什么，我的页脚都没有填满整个屏幕宽度。我能做什么？

体宽 100% 不起作用

我也试过这个：Bootstrap Footer, Full Width Of Page

我正在使用 Angular 11 和 Bootstrap 5。

html

<div class="container">
  <div class="row  align-items-center">
    <div class="contentLeftCorner col-sm-4">
      <div class="footerComponents me-5" >sth</div>
    </div>

    <div class="contentCenter col-sm-4"></div>
    <div class="contentRightCorner col-sm-4">

      <div class="row">
        <div class="col-sm-6">
          <div class="footerComponents me-5">1</div>
          <div class="footerComponents me-5">2</div>
          <div class="footerComponents me-5">3</div>
          <div class="footerComponents me-5">4</div>
        </div>

        <div class="col-sm-6">
          <div class="footerComponents 5 me-5">a</div>
          <div class="footerComponents 5 me-5">b</div>
          <div class="footerComponents 5 me-5">c</div>
          <div class="footerComponents 5 me-5">d</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

    .footerComponents:hover 
  cursor:pointer ;
  color: dimgrey;


.footerComponents
  border-color: transparent;


//no borders on clicked element
*:focus 
  outline: 0;


.contentRightCorner 
  font-size: 0.7rem;

【问题讨论】：

BS5中未包含的类的CSS是什么？我可以帮助你，但需要更多关于它们的信息。您是否提供了整个页脚部分的 html？

我编辑了我的帖子并添加了 CSS。不应该是必要的，因为没有关于需要什么的信息。我不明白您的意思是“您是否提供了整个页脚部分的 html？”我在 app.component.html 中使用它但即使我在 index.html 中单独使用它，页脚仍然不是全屏宽度。

我查过了。它显示全角。您的代码运行良好。容器占用全屏宽度。如果您询问的是组件没有填满整个宽度，那么 footerComponents 右侧有 3rem 的边距。如果您可以分享您想要实现的目标的图像，那就很清楚了。

我用图片编辑了我的帖子。我想实现一个负责任的页脚。在twitter.com 上，您可以看到一个负责任的全宽页脚示例，就像我想要的那样。它似乎依赖于div。如果我只是放一个简单的

3rem 是从哪里来的？我没有在任何地方设置这个。

【参考方案1】：

将.conatainer 的padding 设置为0，将.row 的width 设置为100%，并删除.row 上的装订线位置。同时从footerComponents 中删除me-5 类。

.container 
  padding: 0 !important;
  background-color: aquamarine;


.row 
  --bs-gutter-x: 0 !important;
  width: 100%;


.footerComponents 
  border: 1px solid red;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row align-items-center">
    <div class="contentLeftCorner col-sm-4">
      <div class="footerComponents">sth</div>
    </div>

    <div class="contentCenter col-sm-4"></div>
    <div class="contentRightCorner col-sm-4">

      <div class="row">
        <div class="col-sm-6">
          <div class="footerComponents">1</div>
          <div class="footerComponents">2</div>
          <div class="footerComponents">3</div>
          <div class="footerComponents">4</div>
        </div>

        <div class="col-sm-6">
          <div class="footerComponents">a</div>
          <div class="footerComponents">b</div>
          <div class="footerComponents">c</div>
          <div class="footerComponents">d</div>
        </div>
      </div>
    </div>
  </div>
</div>

注意：我添加了背景颜色和边框属性来显示确切的位置。

希望对你有所帮助。

【参考方案2】：

我认为这是因为您的 footerComponents 位于 <div> 的类 container 中。由于 Bootstrap 5 在特定尺寸的屏幕上为 container 类设置了 max-width。 container 类在超小屏幕上只有 100%。可以参考文档here。

.container            max-width
Extra small <576px  : 100%
Small ≥576px        : 540px
Medium ≥768px       : 720px
Large ≥992px        : 960px
X-Large ≥1200px     : 1140px
XX-Large ≥1400px    : 1320px

为此，您可以尝试将footerComponents <div> 放在container <div> 之外。

另一种选择是在所有断点处使用container-fluid 类，即100%。

【参考方案3】：

将它放在容器 DIV 之外。