0

次の基本レイアウトがあります。これを、純粋な 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と、グリッド grids -responsive.cssのクラスを含む css を調べました。.hidden-*-downBootstrap から知られているクラスのようなものはないようです。また、これを実現するための (purecss-) ユーティリティも見つかりませんでした。

PureCSS を使用して目標を達成し、特定のブレークポイントで要素を非表示にするにはどうすればよいですか?

4

2 に答える 2

0

まず、この css を css ファイルに追加できます。

/* pure-hidden-md *
@media screen and (max-width:48em) {
.pure-hidden-md {display:none}

}

クラス「pure-hidden-md」を任意の場所に追加します。

<div class="pure-u-3-24 pure-hidden-md">ToC</div>
于 2021-06-17T08:37:42.327 に答える