ブートストラップにはいくつかの素敵な.visible-*
(例:.visible-lg
)画面サイズに応じて表示または非表示を選択するクラスユーティリティ。
これらのクラスを使用する場合、スタイリングdisplay: block !important;
正しい画面サイズの場合。
しかし、時々、inline
またはinline-block
。
いくつかのbootstrapルールを選択できるようにきれいにオーバーライドできますか?それともブートストラップの機能要求である必要がありますか?
編集
この問題について疑問に思っているのは私だけではないようです。 github issue です。
最新の回答をありがとう!
これは、Bootstrap v3.2.0 with this commit
新しいレスポンシブクラスのドキュメント によると:
V3.2.0の時点で、各ブレークポイントの.visible--クラスには3つのバリエーションがあり、以下にリストする各CSS表示プロパティ値に対応しています。
Group of classes | CSS display
.visible-*-block | display: block;
.visible-*-inline | display: inline;
.visible-*-inline-block | display: inline-block;
たとえば、次を使用できます。
<p>Device is: <span class="visible-lg-inline">Large</span></p>
Stackoverflowについての質問:
Bootstrap問題:
これはv3.1で修正されました。
.visible-lg
または.visible-md
はdisplay: block !important;
を強制しますが、.hidden-xs
または.hidden-sm
を使用するとインラインで表示されます。
次のライブラリは、インラインおよびインラインブロックのバリエーションで可視ヘルパークラスを拡張します。
https://github.com/moappi/bootstrap.inline-responsive
以下を実装します。
visible-inline-*
hidden-inline-*
そして
visible-inline-block-*
hidden-inline-block-*
bootstrap 3.1以上に更新すると、この時点からhidden-
クラスのタグが非表示になり、display: block
を設定しないようになります。ブロックコンテキストに<div>
を使用し、インラインブロックコンテキストに<span>
を使用できます(これらのタグの通常の動作)