Bootstrap 4：我希望我的列占据容器的整个宽度

Question

我希望我的 列 占据我的 容器 的整个宽度，我尝试了很多方法，但没有找到 解决方案如何解决它.

这是我想要的示例：

虽然现在看起来像这样：

看到红色的小箭头了吗？这是我不想看到的空间。

HTML：

    <div class="container">

      <div class="row">

        <div class="col ml-auto">
          <div class="card card-body justify-content-center" style="height:150px">

            <h5 class="card-title">Privacy & Security</h5>

            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

          </div>

      </div>

    <div class="col mr-auto">
      <div class="card card-body justify-content-center" style="height:150px">

        <h5 class="card-title">Privacy & Security</h5>

        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

      </div>

  </div>

    </div>

  </section>

CSS：

.framework {
    background: rgb(27,28,30);
    background: linear-gradient(180deg, #1b1c1e 0%, #27262d 200%);
    display:grid;
    max-width:100%;
    padding:30px 10px 30px 10px;
    margin-top:0.5em;
    height:100%;
    margin-left: auto;
    margin-right: auto;

    .card {
        background: #27262d;
        border-radius:5px;
    }

    img {
        width:50px;
        height:auto;
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:15px;
    }
}

CSS（移动版）：

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');

.framework {
    .card-title {
        font-family:'Open Sans',sans-serif;
        font-weight:800;
        font-size:14pt;
        text-align:left;
        text-transform:uppercase;
    }

    .card-text {
        font-family:geomanist,sans-serif;
        color:rgba(255, 255, 255, 0.377);
        font-weight:400;
        font-size:10pt;
        letter-spacing:-0.1px;
        line-height:15px;
        text-align:left;
    }

    @media only screen and (max-width: 600px) {
        .card-title {
            font-size:11pt;
            }
        .card-text {
            font-size:9pt;
        }
    }

    
}

编辑（2020 年 10 月 19 日 | 12:09 [布鲁塞尔]）通过在同一 div 中的“.row”类旁边添加“.mx-md-n5”类来修复它，这并不完美，但它满足我

Answer 1

请添加 pl-0 和 pr-0 类以删除填充

<div class="col align-self-start pl-0">
      <div class="card card-body justify-content-center" style="height:150px">

        <h5 class="card-title">Privacy & Security</h5>

        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

      </div>

  </div>

---

<div class="col align-self-end pr-0">
      <div class="card card-body justify-content-center" style="height:150px">

        <h5 class="card-title">Privacy & Security</h5>

        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

      </div>

  </div>

Answer 2

        <div class="col-12 mb-3">
            <div class="card card-body justify-content-center" style="height:150px">

                <h5 class="card-title">Privacy & Security</h5>

                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

            </div>
        </div>

        <div class="col ml-auto">
            <div class="card card-body justify-content-center" style="height:150px">

                <h5 class="card-title">Privacy & Security</h5>

                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

            </div>

        </div>

        <div class="col mr-auto">
            <div class="card card-body justify-content-center" style="height:150px">

                <h5 class="card-title">Privacy & Security</h5>

                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

            </div>

        </div>

    </div>

Answer 3

请首先使用预定义的 Bootstrap 类，如果您有任何自定义 CSS，请将其添加到新类中。 这是您搜索的内容吗：

HTML

<div class="container" style="border:1px red dotted">
  <div class="row " style="border:1px blue dotted">
    <div class="col pl-0">
      <div class="card card-body justify-content-center" style="height:150px">
        <h5 class="card-title">Privacy & Security</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
      </div>
    </div>

    <div class="col pr-0">
      <div class="card card-body justify-content-center" style="height:150px">
        <h5 class="card-title">Privacy & Security</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
      </div>
    </div>
  </div>
</div>

Answer 4

这是一个你想要的演示，我刚刚删除了全宽框的填充，对于接下来的两个框，我删除了左侧框的 padding-left 和右侧框的 padding-right。

这是帮助你理解我的工作的代码 sn-p。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container p-0">
    <div class="row m-0">
      <div class="col-12 p-0 mb-4">
        <div class="card bg-primary card-body text-center justify-content-center" style="height: 150px; font-size: 50px; color: red;">
          Box 1
        </div>
      </div>
      <div class="col-6 pl-0">
        <div class="card bg-primary card-body text-center justify-content-center" style="height: 150px; font-size: 50px; color: red;">
          Box 2
        </div>
      </div>
      <div class="col-6 pr-0">
        <div class="card bg-primary card-body text-center justify-content-center" style="height: 150px; font-size: 50px; color: red;">
          Box 3
        </div>
      </div>
    </div>
  </div>
</body>

</html>

我希望这个答案能帮助你这次解决你的问题，也能在未来帮助你解决这种类型的结构。

谢谢...