7

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

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

<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<div class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</div>
<div class="hidden-sm bg-info">This text is hidden on a SMALL screen.</div>
<div class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</div>
<div class="hidden-lg bg-success">This is text hidden on a LARGE screen.</div>

8
  • похоже в bootstrap4 нет классов hidden
    – Grundy
    25 авг 2017 в 9:04
  • Вы сначала проверьте правильно вы его подключили. 25 авг 2017 в 9:05
  • Забавно, в вопросе используется ссылка не beta версию, а в примере на alpha-6. Причем @soledar в beta версии нет классов с hidden указанных в миграции
    – Grundy
    25 авг 2017 в 9:09
  • 1
    да, не посмотрел версию - для beta - stackoverflow.com/a/45844579/4419684
    – soledar10
    25 авг 2017 в 9:32

2 ответа 2

10

В 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">

<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<div class="d-none bg-danger">This text is hidden on an EXTRA SMALL screen and larger.</div>
<div class="d-sm-none bg-info">This text is hidden on a SMALL screen and larger.</div>
<div class="d-md-none bg-warning">This is text hidden on a MEDIUM screen and larger.</div>
<div class="d-lg-none bg-success">This is text hidden on a LARGE screen and larger.</div>

10

Классы 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
  • Спасибо за развернутый ответ, пробовал старые значения hidden-sm и visible-sm , они для версии 4.1 не работают. 16 авг 2018 в 15:17

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.