Twitter bootstrap скрыть элемент на небольших устройствах

у меня есть этот код:

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

четыре блока с некоторыми текстами внутри. Они равны по ширине, я установил col-sm-3 для всех из них, и то, что я хочу сделать, это скрыть последний nav на очень маленьких устройствах. Я пытался использовать hidden-xs на nav и он ее скрывает, но в то же время я хочу, чтобы другие блоки, чтобы расширить (изменить класс col-sm-3 to col-sm-4)col-sm-4 X 3 = 12.

любое решение?

4 81
html css twitter-bootstrap twitter-bootstrap-3 responsive-design

4 ответа:

на маленьком устройстве:4 columns x 3 (= 12) ==> col-sm-3

On extra small:3 columns x 4 (= 12) ==> col-xs-4

 <footer class="row">
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 7</li>
            <li>Text 8</li>
            <li>Text 9</li>
            </ul>
        </nav>
        <nav class="hidden-xs col-sm-3">
            <ul class="list-unstyled">
            <li>Text 10</li>
            <li>Text 11</li>
            <li>Text 12</li>
            </ul>
        </nav>
    </footer>

как вы говорите, hidden-xs недостаточно, вы должны объединить XS и SM класс.

вот ссылки на официальный документ о доступные адаптивные классы и про Grid-системы.

имейте в виду:

  • 1 строка = 12 cols
  • для XтраSторговый центр устройства:col-xs -__
  • на SMвсе устройства:col-sm -__
  • на MeDустройства НМУ:col-md -__
  • на L arGустройство:col-lg-__
  • сделать видны только (скрытые от других) : видимый-md (видны в средний [не в lg xs или sm])
  • сделать скрытые только (видны на других) : скрытый-xs (просто скрыты в XtraSmall)
135

Bootstrap 4

The отображение (скрытые/видимые) классы изменяются в Bootstrap 4. Чтобы спрятаться на xs использование видового экрана:

d-none d-sm-block

Смотрите также: отсутствует видимый - * * и скрытый - ** в Bootstrap v4

Bootstrap 3 (оригинал ответа)

использовать hidden-xs служебный класс..

<nav class="col-sm-3 hidden-xs">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
</nav>

http://bootply.com/90722

70

для Bootstrap 4.0 есть изменение

смотрите документы:https://getbootstrap.com/docs/4.0/utilities/display/

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

d-none d-sm-block

первый класс set display none на всех устройствах, а второй отображает его для устройств " sm " (вы можете использовать md, lg и т. д. вместо того, чтобы см если вы хотите, чтобы показать на разных устройства.

Я предлагаю прочитать об этом перед миграцией:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

13
<div class="small hidden-xs">
    Some Content Here
</div>

Это также работает для элементов, не обязательно используемых в сетке / небольшом столбце. Когда он отображается на больших экранах, размер шрифта будет меньше, чем размер шрифта текста по умолчанию.

этот ответ удовлетворяет вопросу в заголовке OP (именно так я нашел этот Q/A).

11