![间距]( "间距")
本文介绍了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改变下面列之间的间距，而不是从一边到另一边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！