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。我在变量中创建了一个变量.scss：

$ new_gutter_width：7.5px;

但我不知道如何正确使用它。我会使用像

这样的东西吗？

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

我可能完全错了，但希望你能提供帮助

Answer 1

你必须使用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://www.codeply.com/go/KtO3O9Geg5

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

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

相关：Customizing Bootstrap CSS template

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

1 个答案: