web-dev-qa-db-ja.com

Bootstrap3 .visible- * .hidden- *インライン表示

ブートストラップにはいくつかの素敵な.visible-*（例：.visible-lg）画面サイズに応じて表示または非表示を選択するクラスユーティリティ。

これらのクラスを使用する場合、スタイリングdisplay: block !important;正しい画面サイズの場合。

しかし、時々、inlineまたはinline-block。

いくつかのbootstrapルールを選択できるようにきれいにオーバーライドできますか？それともブートストラップの機能要求である必要がありますか？

編集

この問題について疑問に思っているのは私だけではないようです。 github issue です。

最新の回答をありがとう！

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
47
Augustin Riedinger

Bootstrap v3.2.0の更新

これは、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問題：

63
KyleMit

これはv3.1で修正されました。

.visible-lgまたは.visible-mdはdisplay: block !important;を強制しますが、.hidden-xsまたは.hidden-smを使用するとインラインで表示されます。

15
Pratyush

次のライブラリは、インラインおよびインラインブロックのバリエーションで可視ヘルパークラスを拡張します。

https://github.com/moappi/bootstrap.inline-responsive

以下を実装します。

  • visible-inline-*
  • hidden-inline-*

そして

  • visible-inline-block-*
  • hidden-inline-block-*
12
Chad Brown

bootstrap 3.1以上に更新すると、この時点からhidden-クラスのタグが非表示になり、display: blockを設定しないようになります。ブロックコンテキストに<div>を使用し、インラインブロックコンテキストに<span>を使用できます（これらのタグの通常の動作）

1
dhm80