如何使Bootstrap 4列装订线等于容器填充量? [英] How can I make bootstrap 4 columns-gutters equal to container padding?
问题描述
我当前正在使用引导程序4.在我的代码中，由于引导程序两列填充，两个项目(.items)之间的间隔为30px.但是容器的填充为15px.我认为，如果两个项目之间的间隔为15px(等于容器填充)会更好看.我怎样才能做到这一点?
I am currently using bootstrap 4. In my code, gap between two item (.items) is 30px due to bootstrap two columns padding. But container has padding 15px. I think if gap between two items is 15px which is equal to container padding would be better looking. How can I do that?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-success items'>B</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-info items'>C</div>
</div>
</div>
</div>
</body>
推荐答案
30px填充表示div将被分为15px左填充和15px右填充.因此，发生的是，它在中间的第一个(右侧填充)和第二个div(左侧填充)处添加了15px的填充.所以这是解决方案:
30px padding means it will be divided as 15px left and 15px right padding for div. So what is happening is, it is adding 15px padding from first(right side padding) and second div(left side padding) at center. So here is the solution:
div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'pl-0 col-sm'>
<div class = ' bg-success items'>B</div>
</div>
<div class = ' pl-0 col-sm'>
<div class = ' bg-info items'>C</div>
</div>
</div>
</div>
这是我更改的内容: 在第二和第三div中添加了"pl-0"引导类.希望它能起作用！
This is what I changed: Added "pl-0" bootstrap class to second and third div. Hope it works!
这篇关于如何使Bootstrap 4列装订线等于容器填充量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
