Блог

Главная - Вопросы по программированию - Как добавить изображение слева и справа от строки в начальной загрузке 5 для обеспечения ответственности

Как добавить изображение слева и справа от строки в начальной загрузке 5 для обеспечения ответственности

#html #css #twitter-bootstrap #responsive-design

Вопрос:

Мой код упоминается ниже, но он находится в начальной версии 3. Я хочу, чтобы в левой и правой части страницы было две картинки, как показано на рисунке ниже. Как я могу дать пространство между ними, чтобы сделать его отзывчивым

Изображение ряда, который я хочу

Код в начальной загрузке показан ниже.

  <div class="container-fluid">
            <div class="row opacity">
                        
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12  Opa">                        
                      <img src="./img/cr-logo.png" class="img-responsive">
                    </div>
                    
                    <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">                     
                      
                    </div>
                    
                    
                    <div class="col-lg-1 col-md-1 col-sm-12 col-xs-12">
                 <div class="img">
                    <img src="./img/appointment.png" class="img-responsive">
                 </div>
                    </div>
                    
            </div>
        </div>

Комментарии:

1. В названии написано Bootstrap 5, в вопросе написано 3, а в тегах написано Bootstrap 4. WTF?

2. Я сделал обзор.

Ответ №1:

Этого достаточно. Эти дополнительные div теги не требуются. Кстати, я предлагаю использовать Bootstrap 4 или выше, и я использовал Bootstrap 4.

  • justify-content-between — Он будет отображать гибкие элементы с пробелами между ними.
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-between">
    <img src="https://fakeimg.pl/200x100" class="">
    <img src="https://fakeimg.pl/100" class="">
   </div>
</div>
Метки: