Bootstrap 4改变下面列之间的间距，而不是从一边到另一边

编程基础网前端问题

2022-01-01

Bootstrap 4 change spacing between columns wraps underneath instead of side to side(Bootstrap 4改变下面列之间的间距，而不是从一边到另一边)

本文介绍了Bootstrap 4改变下面列之间的间距，而不是从一边到另一边的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试实现的是一个2 div，它占用6列位，它们之间有1px的空格。数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6  bg-danger text-light text-center"> Hello </div>
</div>
</div>

但由于某些原因，当Ι试图实现它时，另一件物品被放在下面(包裹)，而不是侧面。你知道我怎么才能让6栏之间留有一定的空格，同时仍然保持并排吗？

推荐答案

间距(列之间的间距)是用填充创建的，而不是用边距创建的。当你调整边距时，它就会脱离网格。您可以使用内部DIV...

<div class="container-fluid px-0">
    <div class="row no-gutters">
        <div class="col-6 text-light text-center">
            <div class="bg-dark mr-1">Hello</div>
        </div>
        <div class="col-6 text-light text-center">
            <div class="bg-danger">Hello</div>
        </div>
    </div>
</div>

或，强制row否使用flex-nowrap...

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
        <div class="col-6 bg-danger text-light text-center"> Hello </div>
    </div>
</div>

或者，只需使用padding utils来调整列间距。

https://codeply.com/go/p4NpmmRxmb

这篇关于Bootstrap 4改变下面列之间的间距，而不是从一边到另一边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！