如何使引导 4 列-排水沟等于容器填充？答案

【问题标题】：How can I make bootstrap 4 columns-gutters equal to container padding?如何使引导 4 列-排水沟等于容器填充？
【发布时间】：2020-04-29 02:38:00
【问题描述】：

我目前正在使用引导程序 4。在我的代码中，由于引导程序两列填充，两个项目 (.items) 之间的间隙为 30 像素。但是容器有 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>

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

30px padding 表示它将被划分为 15px 左和 15px 右 div 的填充。所以发生的事情是，它在中心添加了第一个（右侧填充）和第二个 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>

这是我改变的：将“pl-0”引导类添加到第二个和第三个 div。希望它有效！

【讨论】：

这在小屏幕上很难看。
因为你没有提到你也在寻找小屏幕尺寸，我没有提到 pl-0 是所有屏幕尺寸的一般填充。您可以使用填充类作为 pl-md-0（平板电脑尺寸及以上）或 pl-lg-0（桌面尺寸及以上），具体取决于您的目标屏幕尺寸。如需进一步参考，您可以通过：getbootstrap.com/docs/4.1/utilities/spacing

【解决方案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

【讨论】：

第一种方法在小屏幕上看起来不太好。第二种方法没问题。但是如果有任何带有引导类的解决方案会更好。
您的问题没有说明首选方法或您对小屏幕的期望。请编辑问题以澄清。答案解释了使用引导类which can also be used responsively（即：px-sm-0）

【解决方案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 给了我 0.5rem 填充。您可能希望根据您的 Bootstrap 配置使用不同的值，例如pr-lg-1 或 pr-lg-3。

【讨论】：

【解决方案4】：

上述问题存在多个问题。在移动设备（col 或 xs）上查看 BS 网格布局时，会删除容器填充。结果，两列布局的左右内边距组合使其看起来不平衡（列之间的内边距过多）。

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

【讨论】：