Как я могу скрыть ячейку в определенной точке останова? - PullRequest
Новая
       49

Как я могу скрыть ячейку в определенной точке останова?

0 голосов
/ 29 октября 2019

У меня есть следующая базовая раскладка, которую я сейчас хотел бы преобразовать в адаптивную сетку, используя чистый CSS. 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ... --> 
</head>
<body>
    <div class="pure-g">
        <div class="pure-u-1">Navigation</div>

        <div class="pure-u-5-24">left space</div>

        <div class="pure-u-11-24">content</div>
        <div class="pure-u-3-24">ToC</div>

        <div class="pure-u-5-24">right space</div>

        <div class="pure-u-1">Footer</div>
    </div>
</body>
</html>

К сожалению, я не знаю, как я могу скрыть, например, <div class="pure-u-3-24">ToC</div> на конкретномостанова.

Я посмотрел базовый файл pure.css , а также CSS, содержащий классы для сетки grids-responseive.css . Кажется, что не существует такой вещи, как класс .hidden-*-down, известный из Bootstrap. Также я не могу найти никаких (purecss-) утилит для этого.

Как я могу достичь своей цели и скрыть элемент в определенной точке останова, используя PureCSS?

1 Ответ

0 голосов
/ 29 октября 2019

Вы можете использовать медиазапросы . ToC будет скрываться под 728px. 

@media screen and (max-width:728px){
  .pure-u-3-24 {
    display:none;
  }
}
<div class="pure-g">
  <div class="pure-u-1">Navigation</div>

  <div class="pure-u-5-24">left space</div>

  <div class="pure-u-11-24">content</div>
  <div class="pure-u-3-24">ToC</div>

  <div class="pure-u-5-24">right space</div>

  <div class="pure-u-1">Footer</div>
</div>
...