容器不适合所有屏幕尺寸的宽度 - 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;
}