为什么我的引导网格有太多边距？

Question

我在 Angular 中使用 Bootstrap，并通过 npm 安装了它，但由于某种原因，两边的边距太大，有人可以帮帮我吗？

这是代码

<div class="container">
  <div class="row">
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
  </div>
</div>

更新：我没有任何 css，只有 bootstrap css，这是本周使用 npm 安装的 bootstrap 的缩小版本。

但是我只是认为这是关于引导程序的一些新东西，所以我想我会再次设置项目并看看会发生什么，甚至可能下载另一个引导程序版本。

Answer 1

如果要为容器设置全宽，请使用.container-fluid 而不是.container

<div class="container-fluid">
  <div class="row">
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
    <div class="col">Left column</div>
    <div class="col">Right column</div>
  </div>
</div>

Answer 2

由于您使用“.container”、“.container-fluid”或“.row”等类，因此您会受到 bootstrap.css 文件中为这些类设置的属性的限制。

因此，您的选择是使用具有不同名称的类的常规 div，并将宽度设置为 100%。 另一个选项可能是覆盖引导程序的网格类。在这种情况下，只需使用纯 CSS，因为如果有人使用引导程序是为了利用它的实用程序；否则，最好创建我的网格。

“.row”类在两边都占用了额外的空间，是的，这是故意的，因为这个想法是将列嵌套在行中，同时应该嵌套在流体、响应式或默认容器中.两个参考链接： https://getbootstrap.com/docs/5.0/layout/grid/#how-it-works 并且练习... https://codepen.io/limakid/pen/zYwdJqQ?editors=1100

TEXT JUST INSIDE OF BODY TAG, no div, no header. Nothing is wrapping this text.<br>
<h1>Text wrapped with &lth1&gt only.</h1>
<div class="row personal-out-of">This is a ROW class out of “.container” class of Bootstrap.</div> <br>
<div class="col personal-out-of">This is a <b>COL class</b> out of “.container” class of Bootstrap, and it‘s also out of any ROW.</div><br>
<div class="container personal-text">
  Text inside of a Bootstrap container class. Note the <b>PADDING ON THE LEFT</b> and compare with the ROW below.
  <div class="bg-info row row-cols-1 row-padding">
     Text out of column. Only inside of row. No element, no class attached. <br>
    “.ROW” class takes extra space both sides; more notorious on the left in this example
    Class “.row-cols-{NUMBER}” define how many columns you want inside of that row. Only 1 column in this case. 
        <div class="d-block personal-col-child">This is a column inside a row.
      Note the padding on the left.</div>
        <section class="row bg-warning">This is a yellow row inside a row.</section>
        <section class="col bg-warning">This is a yellow column inside a row.</section>
        <article class="row bg-danger text-white">Row inside of a row.</article>
        <div class="col bg-success text-warning">Another column inside a row.</div>
     </div>
  <hr>
  <div class="row row-cols-1 bg-primary text-white">This is a new row. Nothing to do with the row above, but still inside of “.container” class. This will NEST the next 2 contents.
    <div class="row bg-primary border border-bottom-1 border-dark text-white">This is a new row, nested.</div>
        <div class="col bg-primary text-white">This is column. ROWS in Bootstrap are thought to wrap columns. When you create a row, automatically get extra paddings, BUT when you create a column inside (“.col”) you remove automatically that extra padding</div>
  </div>
</div>

// .row-padding{
//   padding-left: 12px;
// }

.personal-text{
 background-color: #E6AFFA; /* Light PURPLE*/
}

.personal-out-of{
  background-color: lime;
}

.personal-col-child{
  background-color: #FAD8AF;
}

Answer 3

如果您检查引导程序的容器类，您会看到一些类似

@media(min-width:1200px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1140px;
}
@media(min-width:992px){
.container, .container-lg, .container-md, .container-sm {
    max-width: 960px;
}
@media(min-width:768px){
.container, .container-md, .container-sm {
    max-width: 720px;
}
@media(min-width:576px){
.container, .container-sm {
    max-width: 540px;
}

这表明，例如如果您的屏幕宽度超过 1200 像素，则可用的最大宽度为 1140 像素。在早期，屏幕更宽并不常见。 Bootstrap 5 添加一个新断点来考虑这个新屏幕（如果您使用的是 Bootstrap 4.6，例如，您可以将其添加到您的 .css 中

@media(min-width:1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1320px;
    }

真的，我认为超过 1320 像素的行很难阅读，但您可以扩展它或不将其放在表格的“容器”下