使用Bootstrap 3和4时，为页面内容设置最大宽度的正确方法是什么？

Question

这样做的原因是当窗口太宽时，如果页面上的信息展开超出宽度1000px，那么页面上的信息将会过于宽松。

我能想到

body { max-width: 1000px }

但如果你的页脚可以跨越整个宽度呢？那么如果页面的主要内容部分在

内部呢？

<div id="root">

</div>

或

<main id="main">

</main>

然后只需使用

#root { max-width: 1000px }

或

main { max-width: 1000px }

与Bootstrap 3和4的样式规则一起使用它是一个好方法吗？

Answer 1

没有明确的正确方法。 Bootstrap方式是使用container（定义的宽度）或container-fluid（全宽）。如果你想要一个除container以外的页面宽度，定义一个自定义的“包装”类，并在其中使用容器流体......

.wrapper {
   max-width: 1000px;
   margin: 0 auto;
}

<div class="wrapper">
  <div class="container-fluid">
  </div>
</div>
<footer></footer>

第二个想法，最好定制container，因为你希望内容像容器一样居中。

@media (min-width: 1200px) {
    .container.container-custom {
        max-width: 1000px;
    }
}

演示：http://www.codeply.com/go/k5QtAfRysh

无论哪种方式，它都是一种自定义方法，并且没有“正确的方法”