Скройте изображения на маленьких экранах, используя Bootstrap - PullRequest
Новая
       75

Скройте изображения на маленьких экранах, используя Bootstrap

0 голосов
/ 17 июня 2020

У меня есть следующая разметка, в которой используется bootstrap 4 для отображения текста и изображений, как показано ниже: - 

<div class="container">
    <div class="row">
        <div class="col-xl-12">
            <img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-block" />
            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">.... </p>
            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">....</p>

            <img src="~/img/img2.png" class="mx-auto d-block" />

            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">....</p>
            <p class="span12 pagination-centered" style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">..../p>


        </div>

    </div>

</div>

теперь я хочу скрыть 2 изображения на экранах небольшого размера и оставить только текст, как я могу это сделать, используя bootstrap 4? спасибо

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Вы можете использовать классы отображения с точками останова.

Медиа-запросы влияют на ширину экрана с данной точкой останова или больше. Например, .d-lg-none устанавливает display: none; на экранах lg и xl.

Это будет скрыто на мобильных устройствах, отображается только на экранах размером более 768 пикселей. (см. на полном экране) 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

 <img src="https://picsum.photos/536/354" style="height:250px;width:250px" class="mx-auto d-none d-md-block" />
0 голосов
/ 17 июня 2020

Измените класс изображений на этот: 

<img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-md-block" />    
<img src="~/img/img2.png" class="mx-auto d-none d-md-block" />

Используйте d-sm-block, если вы хотите показывать изображение на еще меньших устройствах. Здесь - это шпаргалка для bootstrap, которую вы можете использовать.

...