css - 容器不适合所有屏幕尺寸的宽度 - Bootstrap

Question

我正在尝试使用 bootstrap 设计一个始终适合屏幕尺寸(高度和宽度)的容器。但是正如您在示例中看到的那样，它很好地适合高度，但不适合所有屏幕尺寸的宽度。

我在这里错过了什么？预先感谢您的建议。

这是代码是:

html,body{height:100%;}

.fill{
    width:100%;
    height:100%;
    min-height:100%;
    background-color:#990000;
    color:#efefef;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fill">
  <div class="container">This is the title</div>
  <div class="container">
    <div class="row">
      <div class="col-6">Item 1</div>
      <div class="col-6">Item 2</div>
    </div>
    <div class="row">
      <div class="col-6">Item 3</div>
      <div class="col-6">Item 4</div>
    </div>
  </div>
  <div class="container">Author: Mr. X</div>
</div>

Answer 1

Bootstrap 将 max-width 属性应用于 .container。

添加这个 CSS，你应该是好的:

.container {
    max-width: unset;
}