Question

我当前正在使用引导程序4。在我的代码中，由于引导程序两列填充，两个项目（.items）之间的间隔为30px。但是容器的填充为15px。我认为如果两个项目之间的间隙为15px，则等于容器填充会更好看。我怎样才能做到这一点？

  <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>

Answer 1

30px填充意味着div将被分为左15px和右15px填充。因此，发生的是，它在中间的第一个（右侧填充）和第二个div（左侧填充）处添加了15px的填充。所以这是解决方案：

    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”引导类。希望它能起作用！

Answer 2

您可以使用px-0 ...

从中间列中删除填充。

<div class="container-fluid border">
    <div class="row">
        <div class="col-sm">
            <div class="bg-primary items">A</div>
        </div>
        <div class="col-sm px-0">
            <div class="bg-success items">B</div>
        </div>
        <div class="col-sm">
            <div class="bg-info items">C</div>
        </div>
    </div>
</div>

或者，使用特殊的CSS类覆盖Bootstrap的装订线（= 7.5px）...

.p-row-sm {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.p-row-sm > div[class^="col"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

演示：https://www.codeply.com/go/SZcY3X4hTY

Answer 3

您可以使用Bootstrap实用程序类来解决此问题。这是我的项目中的一个示例：

<div class="row">
  <div class="col-lg-6 pr-lg-2">...</div>
  <div class="col-lg-6 pl-lg-2">...</div>
</div>

这个想法很简单：当我的屏幕足够大以显示两个列时，我会应用半天沟。

请注意，我使用1rem装订线，而pr-lg-2 / pl-lg-2给了我.5rem填充。您可能要根据您的Bootstrap配置使用不同的值，例如pr-lg-1或pr-lg-3。

Answer 4

上述问题有几个问题在起作用。在移动设备（col或xs）上查看BS网格布局时，将删除容器填充。结果，两列布局的左，右内部填充组合在一起使它看起来失去了平衡（列之间的填充过多）。

从理论上讲，解决方案是直接的。全局删除左侧或右侧填充。但是，这将导致其他不平衡，如果您正在工作并且布局中的项目数量可变，则很难预测。解决方案是使用：nth-child（even / odd）选择器删除奇数列元素上的右填充和偶数列元素上的左填充。在此处查看解决方案BS4 Reduce Padding Between 2-Up Grid Cards on Mobile

如何使Bootstrap 4列装订线等于容器填充？

4 个答案: