Question

我正在使用Bootstrap 4“容器”包裹我的页脚。

容器宽度未按预期覆盖屏幕底部。如果将“容器”更改为“容器流体”，它也无法按预期工作。

JSFiddle在这里：https://jsfiddle.net/1Zero3Tech/6p1rg3ub/3/

 <div class="container">
        <footer class="footer">
            <div class="row">
                <div class="col-6 text-left">
                    Some Text On The Left
                </div>
                <div class=" col-6 text-right">
                    Some Text On The Right
                </div>
            </div>
        </footer>
    </div>

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    font-weight: 600;
    background-color: yellow;
}

Answer 1

container或container-fluid类应用于覆盖内容区域，而不是宽度。

因此，我已经重构了HTML结构，footer将负责宽度，而不是container或container-fluid。他们将负责您的内容区域。

为了方便起见，我添加了一个fixed类，该类使页脚更加固定到页面底部，但是如果您不希望粘贴页脚，则可以始终删除课程。

.footer {
  background-color: yellow;
  font-weight: 600;
  height: 60px;
  line-height: 60px;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<footer class="footer fixed">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 text-left">
        Some Text On The Left
      </div>
      <div class=" col-6 text-right">
        Some Text On The Right
      </div>
    </div>
  </div>
</footer>

Answer 2

j08691和Paulie_D都是正确的。取出SEQUENCE，然后在父iCal上加上一些负边距。您可能还想尝试使父position: absolute粘在底部。

Bootstrap 4容器宽度不正确

2 个答案: