Bootstrap Выравнивание изображения и абзаца слева и справа по столбцам - PullRequest
Новая
       9

Bootstrap Выравнивание изображения и абзаца слева и справа по столбцам

0 голосов
/ 25 апреля 2020

У меня проблема с Bootstrap 4. Я пытаюсь выровнять изображения по абзацам, чтобы изображение находилось в первом ряду с левой стороны с абзацем, во втором ряду - с правой стороны, а абзац - с левой, третий ряд изображение на левой стороне с абзацем на правой стороне, я хочу сделать его отзывчивым на всех устройствах, но устройства среднего размера выравнивают первое и второе изображения в одном ряду, и я не знаю, как это исправить.

Так что в основном я скрываю изображения на больших экранах и показываю их на маленьких экранах.

Вот мой код, чтобы вы могли видеть, что происходит: 

<div class="container">

    <div class="row">
        <div class="text-size lead col-lg-8 col-md-12 col-sm-12 col-xs-12 float-right">
            <p class="ml-auto"><h1>Heading/h1>In in lectus vel sapien pellentesque euismod a in sapien. Praesent auctor odio ut condimentum pulvinar. Vivamus in feugiat lectus. Morbi risus nulla, mattis vitae massa eget, sodales fringilla nisl. Praesent eget hendrerit turpis. Sed aliquam luctus sapien, a tempus tortor consequat eget.</p>

        </div>
        <div class="d-none d-md-block"><img srcset="images/img1.jpg" width="300px" alt="Image" id="imgDest" class="img-fluid rounded pull-right">
        </div>
        <div class="d-md-none"><img srcset="images/img1.jpg" width="300px" alt="Image" id="imgDest" class="img-fluid rounded pull-right">
        </div>

        <div class="d-none d-md-block"><img srcset="images/img2.jpg" width="300px" alt="Image 2" id="imgDest" class="img-fluid rounded pull-right">
        </div>
        <div class="text-size lead col-lg-8 col-md-12 col-sm-12 col-xs-12 float-right">
            <p class="ml-auto"><h1>Heading</h1>In in lectus vel sapien pellentesque euismod a in sapien. Praesent auctor odio ut condimentum pulvinar. Vivamus in feugiat lectus. Morbi risus nulla, mattis vitae massa eget, sodales fringilla nisl. Praesent eget hendrerit turpis. Sed aliquam luctus sapien, a tempus tortor consequat eget.</p>

        </div>
        <div class="d-md-none"><img srcset="images/image2.jpg" width="300px" alt="Image 2" id="imgDest" class="img-fluid rounded pull-right">
        </div>

        <div class="text-size lead col-lg-8 col-md-12 col-sm-12 col-xs-12 float-right">
            <p class=""><h1>Heading 3</h1>In in lectus vel sapien pellentesque euismod a in sapien. Praesent auctor odio ut condimentum pulvinar. Vivamus in feugiat lectus. Morbi risus nulla, mattis vitae massa eget, sodales fringilla nisl. Praesent eget hendrerit turpis. Sed aliquam luctus sapien, a tempus tortor consequat eget.</p>
        </div>
        <div class="d-none d-md-block"><img srcset="images/img3.jpg" width="300px" alt="Image 3" id="imgDest" class="img-fluid rounded pull-right">
        </div>
        <div class="d-md-none"><img srcset="images/img3.jpg" width="300px" alt="Image 3" id="imgDest" class="img-fluid rounded pull-right">
        </div>

    </div>
</div>

И есть ли другой способ сделать это без использования скрытых изображений для загрузки на другие устройства?

1 Ответ

0 голосов
/ 30 апреля 2020

Используйте класс порядка столбцов bootstrap, чтобы расположить изображения и абзацы в зависимости от размеров экрана. Вот ссылка , которая может помочь.

...