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

Posted 2023-03-05

【中文标题】更改特定元素的装订线宽度 bootstrap 4 mixin

【英文标题】：Changing gutter width on specific elements bootstrap 4 mixin

【发布时间】：2018-08-24 12:24:27

【问题描述】：

如何使用 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" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                    <div class="gal_col"><img class="img-fluid" src="<?php bloginfo('template_directory'); ?>/imgs/gal_img.jpg" ></div>
                </div>

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

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

$new_gutter_width: 7.5px;

但我不知道如何准确地使用它。我会使用类似的东西

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

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

【参考方案1】：

引导程序 5（2021 年更新）

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

Bootstrap 4（原始答案）

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

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

我认为 Bootstrap 中不存在为此而存在的 mixin。用于创建列 (make-grid-columns) 的 mixin 仅在 .col* 上设置装订线。

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

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

https://codeply.com/go/KtO3O9Geg5

还要注意，.row 上 15px 的负边距也可能需要调整，以便外列与左/右均匀对齐：

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

---

相关：Customizing Bootstrap CSS template

【讨论】：

不，我猜不是。但这是我想学习做的事情。谢谢

如果我只是将其更改为 .col*，我是否可以在 .gal_col 上设置装订线，或者这仍然是不可能的吗？

不，.col* 我的意思是所有列中的通配符 col-12 col-9 col-10 所以不可能为 .gal_col 定义新的列定义和不同的装订线使用 mixin。

我用 SASS @extend 添加了另一个选项