如何在引导程序中制作全角 div

Question

我在我的一个项目中使用 Bootstrap。 我在列内制作 div，但它们没有跨越列的全宽。

这是一个示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style type="text/css">
    .col{
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      <div class="blue" style="background-color: blue;">
        1 of 3
      </div>
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>
</body>
</html>

我的问题很简单：“如何使我的<div class="blue">跨越原始列的 100% 宽度？”

我还尝试将宽度设置为 100%。

更新

我使用<div class="row no-gutters">而不是<div class="row">并删除了container-fluid 。 像魅力一样工作

Answer 1

you have to use this class in row

"row no-gutters justify-content-md-center"

Answer 2

您希望每个 div 占用 100% 的列吗？ 如果是这样，您的 div 当前设置为col-2 ，也许您应该将它们设置为col-12 （使用所需的视口前缀、lg、md 等...）

Answer 3

这听起来像是 CSS 问题。 默认情况下，Bootstrap 网格系统中的列具有 100% 的宽度。

我唯一的建议是检查您的 CSS 是否有“蓝色”class。 它需要是：

.blue{
    margin: 0px;
    ...
}

我也会尝试在您的 HTML 中更改以下内容

<div class="row justify-content-md-center">

只是

<div class="row">

并在您的 CSS 文件中设置 justify-content 并查看是否有帮助

如何在引导程序中制作全角 div

问题描述

3 个解决方案

解决方案1
1 已采纳 2021-01-23 11:25:33

解决方案2
0 2021-01-21 12:21:07

解决方案3
0 2021-01-21 13:46:36

如何在引导程序中制作全角 div

问题描述

3 个解决方案

解决方案1 1 已采纳 2021-01-23 11:25:33

解决方案2 0 2021-01-21 12:21:07

解决方案3 0 2021-01-21 13:46:36

解决方案1
1 已采纳 2021-01-23 11:25:33

解决方案2
0 2021-01-21 12:21:07

解决方案3
0 2021-01-21 13:46:36