Bootstrap 4 hidden не работает: html — Не работает «hidden» в bootstrap 4

html — Не работает «hidden» в bootstrap 4

Не скрывает элементы в bootstrap 4, при подключении bootstrap 3 все работает хорошо

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<h3>Example</h3>
<p>Resize this page to see how the text below changes:</p>
<div>This text is hidden on an EXTRA SMALL screen.</div>
<div>This text is hidden on a SMALL screen.</div>
<div>This is text hidden on a MEDIUM screen.</div>
<div>This is text hidden on a LARGE screen.</div>

• html
• html5
• bootstrap

8

В beta версии в очередной раз все переиграли и теперь группа классов имеет вид:

.d-*-none

Стоит так же обратить внимание, что теперь условия применяются не на конкретный диапазон, например, только на medium, а на medium

и больше. Поэтому был убрал класс с xs, так как сейчас это эквивалентно не показываться на экранах xs и больше, что означает — никогда не показывать.

Пример:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<h3>Example</h3>
<p>Resize this page to see how the text below changes:</p>
<div>This text is hidden on an EXTRA SMALL screen and larger.</div>
<div>This text is hidden on a SMALL screen and larger.</div>
<div>This is text hidden on a MEDIUM screen and larger.</div>
<div>This is text hidden on a LARGE screen and larger.</div>

Классы hidden-* и visible-* в бета-версии Bootstrap 4 удалены. Если вы хотите скрыть элемент на определенных уровнях или контрольных точках в Bootstrap 4, используйте классы отображения d- *.

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down = d-none (same as hidden)
• hidden-xs-up = d-none (same as hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up = d-xl-none
• hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
• hidden-sm (only) = d-block d-sm-none d-md-block
• hidden-md (only) = d-block d-md-none d-lg-block
• hidden-lg (only) = d-block d-lg-none d-xl-block
• hidden-xl (only) = d-block d-xl-none
• visible-xs (only) = d-block d-sm-none
• visible-sm (only) = d-none d-sm-block d-md-none
• visible-md (only) = d-none d-md-block d-lg-none
• visible-lg (only) = d-none d-lg-block d-xl-none
• visible-xl (only) = d-none d-xl-block

Оригинал — Stackoverflow EN

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Не скрывается блок в bootstrap (hidden-md hidden-lg)

Есть блок с 4 элементами в сетке bootstrap которые отличаются по содержанию, а значит и по высоте. Фидл

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
            <div>
                <div>
                    <div>
                        <img src="http://placehold.it/112x112" alt="текст" title="текс">
                    </div>
                    <h5>Текст</h5>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500. Lorem Ipsum has been the industry's standard dummy</div>
                </div>
				<div>
                    <div>
                        <img src="http://placehold.it/112x112" alt="текст" title="текс">
                    </div>
                    <h5>Текст</h5>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</div>
                </div>
				<div></div>
				<div>
                    <div>
                        <img src="http://placehold.it/112x112" alt="текст" title="текс">
                    </div>
                    <h5>Текст</h5>
                    <div>Lorem Ipsum is simply</div>
                </div>
				<div>
                    <div>
                        <img src="http://placehold.  it/112x112" alt="текст" title="текс">
                    </div>
                    <h5>Текст</h5>
                    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500. Lorem Ipsum has been</div>
                </div>
            </div>

Хочу добиться правильного отображения на всех разрешениях экранов, но элементы соскакивают на следующую строку с пустотами. Пробую исправить отображение с помощью

<div></div>

Но, блок почему-то не скрывается на экранах размеров md и lg В чем причина и как это исправить?

• html
• css
• bootstrap

2

Ха, как интересно, — вот такое изменение в блоках не сработало

<div>

А вот так — дало нужный эффект!

<div>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

css — «скрытый» класс Bootstrap 4 не работает

спросил 5 лет, 6 месяцев назад

Изменено 3 года, 5 месяцев назад

Просмотрено 21к раз

Я использую Bootstrap v4 с CSS и JS по умолчанию. Я пытаюсь применить классы hidden , hidden-XX-down и hidden-XX-up в различные элементы div, кнопки и т. д. Но, похоже, это ни на что не влияет. Все остальные классы работают, кроме этого.

Вот пример:

 


  <дел>

    
Lorem ipsum dolor sit amet.

  

 .hidden{
    дисплей: нет;
}
 

 // Очень маленькие устройства (портретные телефоны, менее 576 пикселей) 
  по умолчанию  (макс.  ширина: 575 пикселей) 
 // Маленькие устройства (горизонтальные телефоны, 576 пикселей и выше) 
  (см)  маленькие (мин. ширина : 576px) и (max-width: 767px) 
 
 // Средние устройства (планшеты, 768px и выше) 
  (md)  medium (min-width: 768px) и (max-width: 991px) 
 
 // Большие устройства (настольные компьютеры, 992 пикселя и выше) 
  (lg)  большие (минимальная ширина: 992 пикселя) и (максимальная ширина: 1199)px) 
 
 // Очень большие устройства (большие рабочие столы, 1200 пикселей и выше) 
  (xl)