css 如何将边距应用于全高和全宽的bootstrap v5 COL内容

2ic8powd 于 2023-01-18 发布在 Bootstrap

关注(0)|答案(4)|浏览(177)

这里我有2行，每行有2列。我希望黄色的块有一个边距，并占据该列中除边距之外的所有可用空间。但正如您所看到的，边距完全与黄色的内容不对齐。

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
}

.content-margin {
  margin: 10px;
  background: yellow;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin w-100 h-100  d-flex"></div>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100 d-flex"></div>
    </div>
  </div>
</div>

我想要的结果与此类似：

- 问题：是否有办法通过在黄色块中添加margin**来实现这一点？
- 注意：我知道我可以通过向COL本身添加填充来实现这一点，但这对我的实际用例没有好处。**

https://jsfiddle.net/39zp4tc0/

css

来源：https://stackoverflow.com/questions/75135041/how-to-apply-margin-to-bootstrap-v5-col-content-which-is-full-height-and-full-wi

4条答案

按热度按时间

o75abkj41#

只需在父对象（col）上使用填充，而不是在子对象上使用边距：

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
  padding: 10px
}

.content-margin {
  background: yellow;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin w-100 h-100  d-flex"></div>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100 d-flex"></div>
    </div>
  </div>
</div>

我建议使用边距来定位和填充组件之间的空间。你可以使用边距：auto与display flex结合使用，在特定位置生成一个div。您可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/上查看更多信息

赞(0）回复(0）举报 2023-01-18

pbwdgjma2#

将黄色列的高度更改为60%（带边距）：12px 0;尝试以下操作：

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
}

.content-margin {
  margin: 12px 0;
  background: yellow;
}

.h-60 {
  height: 60%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-60  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin w-100 h-60  d-flex"></div>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-60  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-60 d-flex"></div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-18

iyfamqjs3#

我仍然使用填充，但是如果你不能把它放在列上，把它放在一个内部元素上，作为你的黄色盒子的 Package 。

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
}

.bg-yellow {
  background: yellow;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row gx-0 justify-content-md-center">
    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>

    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>
  </div>

  <div class="row gx-0 justify-content-md-center">
    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>

    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-18

igetnqfo4#

好了，我找到了一种有效地将MARGIN应用于黄色div元素的方法。
我在COL元素上使用了d-flex和align-items-stretch类，在黄色的div元素上使用了flex-grow-1类，如果我们用这种方式拉伸黄色元素，MARGIN会得到遵守，不会破坏布局。

<div class="container">
  <div class="row g-0 justify-content-md-center">
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin  flex-grow-1  d-flex"></div>
    </div>
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin flex-grow-1 d-flex"></div>
    </div>
  </div>
    <div class="row g-0 justify-content-md-center">
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin flex-grow-1 d-flex"></div>
    </div>
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin flex-grow-1 d-flex"></div>
    </div>
  </div>
</div>

https://jsfiddle.net/dwjk5upn/1/
注意：我还在COL元素上使用了g-0类来去除默认的COL填充。

赞(0）回复(0）举报 2023-01-18

我来回答

css 如何将边距应用于全高和全宽的bootstrap v5 COL内容

4条答案

相关问题

热门标签

最新问答