ブートストラップ水平メニュー

Question

私はブートストラップフレームワークを使用してワードプレスのウェブサイトを作成しようとしていますが、水平サブメニューを作成する方法はありますか？私はすでにWalkerクラスをドロップダウンに使用しています。しかし、私はメニューがthis

dropdown example image.

やモバイル応答であるように見えるしたいと思います。

ありがとうございました。

Answer 1

もしあなたがcssに慣れているなら、ブートストラップなしのメニューを作った場合と同じように、ブートストラップのドロップダウンを使ってcssをカスタマイズして100％幅のドロップダウンを作ることができます。あなたが望むならば、応答性を維持するためにブートストラップ・グリッド・システムを実装することはおそらく可能ですが、ユーザーがモバイル・ビューに入ったときに何が起こるかを考慮する必要があります...メニューを水平にしたくない場合小さな画面でグリッドシステムはこれを手助けするだろうが、私が似たようなことをしたときにはまだいくつかのメディアクエリが必要だった。

代わりに、この効果を達成するためのjqueryプラグインを探したり、JavaScriptの学習を開始したりすることもできます。しかし、あなたが望むものすべてをやらなければ、ブートストラップを使って実際にドロップダウン機能を持っているかのように、あまり有益ではないでしょう。申し訳ありませんが私はあなたに明示的な答えを与えていないが、これはあなたがそれに取り組む方法を理解するのに役立ちます。

Answer 2

「display：-webkit-inline-box;」だけを追加すると、 ulクラスのドロップダウンメニューには、あなたが望むようにメニューが変わっていくのが分かるでしょう - 私が上記のようにする必要があることを言っているわけではありませんが、ちょっと時間がかかるだけです。

まだ行っていない場合は、ブラウザで "inspect element"を使用すると、CSSの変更を簡単にテストできます。そのことについて、私が次にやるべきことが分からなければ、私は次のことをどのように理解するのか。

私はこれがあなたを助けてくれることを願っています。

See Example