改变特定元素的装订线宽度 bootstrap 4 mixin

Question

如何使用 mixins 更改特定元素的间距宽度？我已经浏览了许多教程，但我还没有看到我正在寻找的东西。

这是我的代码：

<div class="row" id="gallery">
            <div class="col">
                <div class="row">
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" alt=""></div>
                </div>

                <p>See more on <a href="#">Instagram</a></p>
            </div>
        </div>

我需要将 .gal_col 上的装订线宽度更改为 7.5px。我在 variables.scss 中创建了一个变量：

$new_gutter_width: 7.5px;

但我不知道如何使用它。我会使用类似

的东西吗

.gal_col{
    @include make-col($new_gutter_width);
}

我可能完全错了，但希望你能帮忙

Answer 1

Bootstrap 5（2021 年更新）

Bootstrap 5 有新的 gutter classes，可让您更改整行的列间距。

Bootstrap 4（原答案）

你必须使用 SASS mixin 吗？可以用 CSS...

来完成

.row > .gal_col {
   padding-right: 7.5px;
   padding-left: 7.5px;
}

我认为 Bootstrap 中不存在为此而存在的混入。用于创建列 (make-grid-columns) 的 mixin 仅在 .col*.

上设置装订线

或者，如果你想使用SASS你可以@extend .col class 这样...

.gal_col {
    @extend .col;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

https://codeply.com/go/KtO3O9Geg5

另请注意，.row 上 15px 的负边距也可能需要调整，以便外部列与 left/right:

均匀对齐

.gal_col_row {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

相关：Customizing Bootstrap CSS template

改变特定元素的装订线宽度 bootstrap 4 mixin

Changing gutter width on specific elements bootstrap 4 mixin

html

sass

mixins

twitter-bootstrap

bootstrap-4