为什么页脚没有填充全屏宽度 html/Bootstrap 5

Question

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

正文宽度 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;
}

Answer 1

我认为这是因为您的 footerComponents 与 class container 在 <div> 内。由于Bootstrap 5 在特定尺寸的屏幕上为container class 设置了max-width。 container class 在超小屏幕上只有 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 class，即在所有断点处 100%。

Answer 2

将 .conatainer 的 padding 设置为 0，将 .row 的 width 设置为 100%，并移除 .row 上的装订线位置。同时从 footerComponents.

中删除 me-5 class

.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>

Note: I have added background-color and border properties to show the exact positions.

希望对您有所帮助。

Answer 3

放在容器外DIV。

为什么页脚没有填充全屏宽度 html/Bootstrap 5

Why is footer not filing the full screen width html/Bootstrap 5

html

footer

width

twitter-bootstrap

angular