引导网格宽度不正确

Answer 1

使用下面的代码。为

.container

元素包装了 .row 类 (

docs

) 并重新排列了一些元素。

容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时是必需的。

#wrapper {background: yellow; max-width: 500px; margin: 0 auto; }
.info {background: blue;}
#side {background: red}
#data {background: orange;}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div id="wrapper">
  <div class="row">
    <div class="col-12">
      <p id="breadcrumbs">
        Breadcrumbs
      </p>

      <h1>...</h1>
      <p class="info">
        Info<br>info<br>
      </p>
      <div class="container">


        <div class="row">
          <section id="side" class="col-md-4 col-lg-3">
            ...
          </section>

          <section class="col-md-8 col-lg-9">
            <div class="row">
              <div class="col-4">
                col 4
              </div>
              <div class="col-8">
                col 8
              </div>

            </div>
            <ul id="data" class="row">
              <li class="col-4">...</li>
              <li class="col-4">...</li>
              <li class="col-4">...</li>
              <li class="col-4">...</li>
            </ul>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>