如何减少引导列之间的空间（仅在不在外部之间）答案

【问题标题】：How can I decrease space between bootstrap columns (only between not on the outsides)如何减少引导列之间的空间（仅在不在外部之间）
【发布时间】：2021-09-29 12:43:05
【问题描述】：

我有一些这样的引导列：

<div class="col-6">
    <a href="gallerij/stockfotos/boeken" class="catphotowrap">
        <div class="catphotodiv">
            <img class="galleryicon" src="website/images/category_icons/8dxVaqo1QlsfhsHnsb0yeCTwwhoIZqBcW80lEJNn.svg" />
            <h2>Boeken</h2>
            <div class="catphotooverlay"></div>
            <img class="gallerybgimg" src="website/images/photos/previews/preview-003fafb080bd3f96d74fbdef3fa1a859.jpg" />
        </div>
    </a>
</div>
<div class="col-6">
    <a href="gallerij/stockfotos/bomen" class="catphotowrap">
        <div class="catphotodiv">
            <img class="galleryicon" src="website/images/category_icons/XJl6AVsrwNULvmVwGuiKtXazlB1Fso6NuKIet8Ld.svg" />
            <h2>Bomen</h2>
            <div class="catphotooverlay"></div>
            <img class="gallerybgimg" src="website/images/photos/previews/preview-6c1b01bd43c5ee53d802d6f67a32927f.jpg" />
        </div>
    </a>
</div>
<div class="col-6">
    <a href="gallerij/stockfotos/details" class="catphotowrap">
        <div class="catphotodiv">
            <img class="galleryicon" src="website/images/category_icons/yReYovclETiF7xQnMHNi4Df9kqyyqWMOErm8DYvB.svg" />
            <h2>Details</h2>
            <div class="catphotooverlay"></div>
            <img class="gallerybgimg" src="website/images/photos/previews/preview-a00b406c81ebe322e7d9469e98c9c200.jpg" />
        </div>
    </a>
</div>
<div class="col-6">
    <a href="gallerij/stockfotos/dieren" class="catphotowrap">
        <div class="catphotodiv">
            <img class="galleryicon" src="website/images/category_icons/nr8FkeGgoQ9tmZIy7r5xOHOPbFbvvIm52nm6tQHm.svg" />
            <h2>Dieren</h2>
            <div class="catphotooverlay"></div>
            <img class="gallerybgimg" src="website/images/photos/previews/preview-1448fdfe351cc3e2a5a6b8d5e3870349.jpg" />
        </div>
    </a>
</div>
<div class="col-6">
    <a href="gallerij/stockfotos/eten" class="catphotowrap">
        <div class="catphotodiv">
            <img class="galleryicon" src="website/images/category_icons/Nuncyz8P5mELHI1dfqfvYqDUhGJhvtY2p5Ce99lO.svg" />
            <h2>Eten</h2>
            <div class="catphotooverlay"></div>
            <img class="gallerybgimg" src="website/images/photos/previews/preview-324d6f2bba88af612e8bae3e9df7c4d1.jpg" />
        </div>
    </a>
</div>

但在移动设备上，您可以在此处看到太多空间：

如何减少列之间的空间（红线）。我发现了关于如何删除它们或如何增加/减少列周围的填充的问题。我只想减少列之间的填充。

我该怎么做？我正在使用引导程序 4。

我发现了像 offset-md-* 这样的偏移类，但这会增加空间，而我想减少空间。

【问题讨论】：

标签： html css bootstrap-4 styles

【解决方案1】：

您可以通过在该特定行中使用 .gx-(value) 类来设置行间距（列之间的空间）。

【讨论】：

【解决方案2】：

将所有子级设置为 100%，父级是列，否则使用 css 网格布局，您可以在其中指定空间 x 和 y 方向

【讨论】：

【解决方案3】：

您使用的是哪个版本的引导程序？您可以阅读有关排水沟的信息。

对于版本 5：https://getbootstrap.com/docs/5.0/layout/gutters/

或

对于版本 4：https://getbootstrap.com/docs/4.0/layout/grid/

问候

【讨论】：