Я работаю над бутстрапом 4.1.Мне нужно скрыть некоторые элементы только на мобильном телефоне, поэтому я решил попробовать свойства экрана.В соответствии с официальной документацией я пытался, как и предполагалось, использовать d-sm-none d-md-block
, но он не работает.
Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d- {sm, md, lg, xl} -one для любого варианта адаптивного экрана.Чтобы показать элемент только на заданном интервале размеров экрана, вы можете объединить один класс .d- -нон с классом .d- - *, например .d-none .d-md-block.d-xl-none скроет элемент для всех размеров экрана, кроме как на средних и больших устройствах.
Вот код, любая помощь будет оценена:
HTML
<div class="row" id="second-row">
<div class="col-sm-12 col-lg-12">
<h2 class="text-uppercase" id="section-title">Lorem ipsum</h2>
</div>
<div class="col-sm-12 col-lg-6">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<div class="row" id="mini-gallery-row">
<div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
<img class="img-fluid w-100" src="img/placeholder.png" alt="" />
</div>
<div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
<img class="img-fluid w-100" src="img/placeholder.png" alt="" />
</div>
<div class="col-sm-12 col-lg-4 d-sm-none d-md-block" >
<img class="img-fluid w-100" src="img/placeholder.png" alt="" />
</div>
</div>
</div>