为什么 bootstrap 会影响网格行间距？有什么办法可以预防吗？

Question

我想将 CSS 网格系统与 Bootstrap 一起使用。不过，他们似乎相处得并不融洽。 grid-gap 部分工作良好，这意味着 grid-column-gap 工作得很好，但不是 grid-row-gap。我只能通过删除 Bootstrap 来解决这个问题。有什么办法吗？

<style>
.gallery--images {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 grid-template-rows: repeat(8, 5vw);
 grid-gap: 0.2em;                                        
 margin-bottom: 10px;
 background: rgba(250, 250, 250, 0.575);
 background-clip: padding-box;
 backdrop-filter: blur(10px );
 border: 2px solid rgb(240, 240, 240);
 border-radius: 5px;
}
</style>


<div class="gallery--images">
    <figure class="gallery__item gallery__item--1">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 1" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--2">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 2" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--3">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 3" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--4">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 4" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--5">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 5" class="gallery__img">
    </figure>
    <figure class="gallery__item gallery__item--6">
        <img src="img/NewYorkCity-1.jpg" alt="Gallery image 6" class="gallery__img">
    </figure>
</div>

https://codepen.io/Isya/pen/RwGXwjJ

Answer 1

figure 标签的边距打破了您的 grid-gap: 0.2em。有必要覆盖此规则。将此添加到您的 css:

figure {
    margin: 0!important;
}

为什么 bootstrap 会影响网格行间距？有什么办法可以预防吗？

why does bootstrap affect grid-row-gap? Is there any way to prevent?

html

css

grid

twitter-bootstrap