ナビゲーションフッターを作成し、左側にロゴを配置し、右側にドロップダウンボックスを配置したいと思います。モバイル画面では、ドロップダウンが上に移動し、全幅を占める必要があります。私はすでに解決策を作成しましたが、それが良いものかどうかはわかりません。codepen
<section class="container">
<div class="left-half">
<h1>Left Half</h1>
</div>
<div class="right-half">
<h1>Right Half</h1>
</div>
</section>
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
text-align: center;
}
.left-half {
grid-row: 2;
}
.right-half {
grid-row: 1;
}
@media (min-width: 576px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.left-half {
grid-row: 1;
grid-column: 1;
justify-self: start;
}
.right-half {
grid-row: 1;
grid-column: 2;
justify-self: end;
}
}解決策を見つけたら、ブートストラップで解決します。
フレックスボックスを使用できます：
.container {
display: flex;
flex-direction: column-reverse;
}
@media (min-width: 576px) {
.container {
flex-direction: row;
justify-content: space-between;
}
}
ただし、アクセシビリティの懸念には注意する必要があります。CSSを使用してレイアウトを移動すると、インタラクティブな要素のキーボードタブが台無しになる可能性があります。たとえばボタンやリンクを使用している場合は、JavaScriptでtabindex値を変更する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加