我有两列:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

我怎么在它们之间加一个空格?

输出只是两个相邻的列,占据了整个页面的宽度。假设宽度设置为1000px,那么每个div将是500px宽。

如果我想在两者之间有一个100px的空间,我如何用Bootstrap自动实现这一点:div的大小将变成450px来补偿间距。


当前回答

由于您正在使用Bootstrap,列间距属性将有助于实现。W3Schools Column-Gap for Bootstrap有关于如何使用它的文档。

CSS:

.col-gap {
  column-gap: 2rem;
}

对于HTML,将类(col-gap)放在行div中。 但也要注意,这可能会影响col-md-6的间距(或其他大小),因此为了补偿,需要减小每列的大小。 (即col-md-6 -> col-md-5,即使只有2列)

HTML:

    //Row
    <div class="row col-gap justify-content-center">
 
    //Col 1
        <div class="col-md-5 ms-3 card p-5">
            <p>Div 1</p>
        </div>

    //Col 2
        <div class="col-md-5 ms-3 card p-5">
            <p>Div 2</p>
        </div>          
    </div>

其他回答

你可以使用colx -xs-*类来实现列与列之间的间隔,在下面编码的colx -xs-* div中。间距是一致的,这样所有的列都能正确对齐。为了获得均匀的间距和列大小,我将执行以下操作:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>

用css添加一个与背景颜色相同的边框怎么样?我是新手,所以也许有一个很好的理由不这样做,但当我尝试它时,它看起来很好。

既然你在使用bootstrap,我猜你想让它有响应性。在这种情况下,你不应该使用固定的大小,例如'px'。

作为其他解决方案的变通方案,我建议将两列都设为“col-md-5”而不是“col-md-6”,然后在包含列的父元素“row”中,添加类“justice -content-between”,这将把空闲空间放在中间,就像你可以在bootstrap文档中检查的那样

当然,这个解决方案也适用于两列以上的调整“col-md-x”

希望能有所帮助;)

引导4,文件自定义。SCSS您可以添加以下代码:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

默认$grid-gutter-width-base: 30px;

引导4 -使用嵌套行分离列。

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>