Bootstrap 4.1网格系统比页面还宽

Question

我在页面上使用bootstrap 4.1，但是当我插入网格系统时，它比页面宽，从而使用户侧向滚动以查看整个网格。

在网格系统之前的页面： https://ibb.co/y8RWGqY

网格系统后的页面： https://ibb.co/LPP0TsL

JFIDDLE

我在网上看过，但人们似乎没有这个问题。

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
              <!-- Slide One - Set the background image for this slide in the line below -->
              <div class="carousel-item active" style="background-image: url('images/c1.jpg')">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="display-4">First Slide</h2>
                  <p class="lead">This is a description for the first slide.</p>
                </div>
              </div>
              <!-- Slide Two - Set the background image for this slide in the line below -->
              <div class="carousel-item" style="background-image: url('images/c2.jpg')">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="display-4">Second Slide</h2>
                  <p class="lead">This is a description for the second slide.</p>
                </div>
              </div>
              <!-- Slide Three - Set the background image for this slide in the line below -->
              <div class="carousel-item" style="background-image: url('images/c3.jpg')">
                <div class="carousel-caption d-none d-md-block">
                  <h2 class="display-4">Third Slide</h2>
                  <p class="lead">This is a description for the third slide.</p>
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </header>

        <div class="logo">
          <img src="images/logo.png">
        </div>

        <br><br><br>

        <main style="text-align: center;">
            <div class="titulo">Quem somos</div>
          </main>

          <div class="row">
              <div class="col-4" style="background-color: red;"><br><br><br><br><br></div>
              <div class="col-8" style="background-color: blue;"><br><br><br><br><br></div>
            </div>

```

Answer 1

请在div行上方添加 container-fluid ，或者您也可以在不添加容器div的情况下删除滚动条，因此在行中添加 m-0 类

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-target="#mycarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <!-- Slide One - Set the background image for this slide in the line below -->
                <div class="carousel-item active" style="background-image: url('images/c1.jpg')">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">First Slide</h2>
                        <p class="lead">This is a description for the first slide.</p>
                    </div>
                </div>
                <!-- Slide Two - Set the background image for this slide in the line below -->
                <div class="carousel-item" style="background-image: url('images/c2.jpg')">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Second Slide</h2>
                        <p class="lead">This is a description for the second slide.</p>
                    </div>
                </div>
                <!-- Slide Three - Set the background image for this slide in the line below -->
                <div class="carousel-item" style="background-image: url('images/c3.jpg')">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Third Slide</h2>
                        <p class="lead">This is a description for the third slide.</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </header>

    <div class="logo">
        <img src="images/logo.png">
    </div>

    <br><br><br>

    <main style="text-align: center;">
        <div class="titulo">Quem somos</div>
    </main>
<div class="container-fluid">
    <div class="row">
        <div class="col-4" style="background-color: red;"><br><br><br><br><br></div>
        <div class="col-8" style="background-color: blue;"><br><br><br><br><br></div>
    </div>
</div>

Answer 2

您唯一需要记住的是，您应该将所有内容放入容器或容器流体类别的div中。如下：

<div class="container">
your code goes here...
</div>

Answer 3

作为这两种解决方案的混合，您应该对网格容器使用a1 < a2类，以使其宽度为100％。

bool is_smaller(unsigned a1, unsigned b1, unsigned a2, unsigned b2) {
    a_diff = a2-a1;    // Will be positive

    if(b1 > b2) {
        return false;
    }
    if(b1 >= a_diff*a_diff) {
        return false;
    }
    temp = a_diff+sqrt(b2);
    return b1 < temp*temp;
}