在Bootstrap 4的2列之间添加空间

时间：2020-04-16 04:00:35

标签： twitter-bootstrap bootstrap-4

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

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

我尝试了三件事：

  1. 我在左侧添加了padding-right，在左侧添加了padding-left 对的，但是当它们都在手机上时，它看起来很糟糕 新行（如您所愿）。

  2. 我试图在它们之间仅添加填充以增加第三个div，但这会破坏结构。

  3. 当然，我尝试给他们使用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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

使用响应式填充类（即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

相关问题
最新问题