在 Bootstrap 4 中的 2 列之间添加空格答案

【问题标题】：Adding space between 2 columns in Bootstrap 4在 Bootstrap 4 中的 2 列之间添加空格
【发布时间】：2020-07-29 05:37:05
【问题描述】：

我在img-fluid 类中连续有两张图片。它们的宽度相同，并且占据了 div 中的所有空间。

我正在努力在它们之间添加空间。

我尝试了 3 件事：

我已将 padding-right 添加到左侧，并将 padding-left 添加到是的，但是当它们都打开时，在手机上看起来很糟糕一个新行（如您所料）。
我尝试在它们之间添加第三个 div，只使用一个填充，但它破坏了结构。
当然，我尝试给他们 col-sm-5 而不是 col-sm-6，但在那种情况下，他们之间的差距太大了。

如何在它们之间添加 5-10 像素而不破坏其他东西？

.wrapper {
    max-width:500px;
    height:500px;
    margin:0 auto;
    background-color:#f0f0f0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container-fluid">
  <div class="row justify-content-between">
    <div class="col-sm-6 p-0">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    <div class="col-sm-6 p-0">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
  </div>
</div>
</div>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

.wrapper {
    max-width:500px;
    height:500px;
    margin:0 auto;
    background-color:#f0f0f0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    

</head>
<body>

<div class="wrapper">
<div class="container-fluid">

<div class="row justify-content-between">
  
    <div class="col-sm-6 pt-2">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    
    <div class="col-sm-6 pt-2">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
   
  </div>
  
  <div class="row justify-content-between">
  
    <div class="col-sm-6 pt-2">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    
    <div class="col-sm-6 pt-2">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
   
  </div>

       <div class="row justify-content-between">
  
    <div class="col-sm-6 pt-2">
      <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
    </div>
    
    <div class="col-sm-6 pt-2">
   <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
    </div>
    </div>
    
    
</div>
</div>
</html>

在这里，两个图像之间的空间并在下面添加多个相同的图像以显示它正在工作。我不知道你想要它们之间有多大的空间。

css代码

<style>
  .wrapper {
    max-width:500px;
    height:500px;
    margin:0 auto;
    background-color:#f0f0f0;
   }
</style>

HTML 代码

<div class="wrapper">
    <div class="container-fluid">

    <div class="row justify-content-between">

       <div class="col-sm-6 pt-2">
          <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
        </div>

        <div class="col-sm-6 pt-2">
       <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
        </div>

      </div>

      <div class="row justify-content-between">

        <div class="col-sm-6 pt-2">
          <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
        </div>

        <div class="col-sm-6 pt-2">
       <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
        </div>

      </div>

           <div class="row justify-content-between">

        <div class="col-sm-6 pt-2">
          <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
        </div>

        <div class="col-sm-6 pt-2">
       <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
        </div>
        </div>
    </div>
    </div>

【讨论】：

谢谢你，Bharti，但在这种情况下，图片不会占用 div 中的所有空间，因此不实用。正如您在我的示例中看到的那样，它们应该接触到包装 div 的边框。

【解决方案2】：

使用响应式填充类（即：pr-sm-2）...

<div class="wrapper">
    <div class="container-fluid px-0">
        <div class="row no-gutters justify-content-between">
            <div class="col-sm-6 pr-sm-2">
                <img src="https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg" class="img-fluid">
            </div>
            <div class="col-sm-6">
                <img src="https://img.freepik.com/free-photo/white-cloud-blue-sky-sea_74190-4488.jpg" class="img-fluid">
            </div>
        </div>
    </div>
</div>

https://codeply.com/p/9FeTihZoPs

【讨论】：

谢谢！这正是我一直在寻找的。我在 Bootstrap 文档中阅读了有关响应式填充类的信息，但它们没有包含如何使用它的示例。现在我知道了。