Bootstrap 4.1 grid-система шире, чем страница

Question

Я использую загрузчик 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 или container-liquid. как показано ниже:

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

Answer 2

Как смесь обоих решений, вы должны использовать класс container-fluid для контейнера сетки, чтобы сделать его шириной 100%.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   
<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 3

Пожалуйста, добавьте контейнер-жидкость над строкой div или вы также можете удалить прокрутку без добавления контейнера 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>