为什么页脚不提交全屏幕宽度html/引导带5

Question

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

体宽100%不起作用

我也试过这个：引导页脚，页面的全宽度

我工作的角度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

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

​

注意:我已经添加了背景色和边框属性来显示准确的位置.

希望这个能帮到你。

Answer 2

我认为这是因为您的footerComponents与类container一起在<div>中。由于引导程序5在一定大小的屏幕上为container类设置了一个container。在超小屏幕上，container类仅为100%。您可以参考文档这里。

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

Answer 3

把它放在集装箱DIV的外面。