У меня есть две картинки подряд с классом img-fluid. Они имеют одинаковую ширину и занимают все пространство в div.

Я изо всех сил пытаюсь добавить пространство между ними.

Я пробовал 3 вещи:

  1. Я добавил отступ справа от левого и отступ слева до правильно, но это выглядит плохо на мобильном телефоне, когда они каждый на новая строка (как и следовало ожидать).

  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>
0
Ant 16 Апр 2020 в 07:00

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

1
Codeply-er 16 Апр 2020 в 11:05
.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
bharti parmar 16 Апр 2020 в 07:58