2016-08-31 11 views
0

私は2つのカラムレイアウトを持つページを持っています。デフォルトでは、2番目のカラムは折りたたまれ、最初のカラムはcol-xs-12クラスです。ボタンをクリックすると、両方の列にcol-xs-6クラスが得られます。限られたスペースのために私はいくつかのものを隠したいと思っています。 divでvisible-mdを使用すると、サイズが992pxより小さくなると非表示になります。ここで問題がありますが、コンテナのサイズは(col-xs-12からcol-xs-6に)変更されますが、ウィンドウのサイズは変更されません。ブラウザのウィンドウサイズではなく、コンテナサイズに応じてvisible-mdの機能を制限する余地はありますか?私はjqueryを書いていないことを意味します。ブートストラップのクラスを使用します。 ありがとうブートストラップvisible-mdをコンテナのサイズに制限する

+0

私はこれがブートストラップのデフォルト機能を使用して可能であるとは思っていません。おそらく、特定のビューポートの幅に基づいて要素を隠す小さなCSSルールを作成する方がよいでしょう。 – CBroe

+0

それでは、jqueryコードを書く方が良いです –

+0

なぜですか?なぜjQueryを使うのは、CSSがやるべき仕事をするよりも優れているのだろうか? – CBroe

答えて

1

私はこれがブートストラップのデフォルト機能を使って可能であるとは思っていません。おそらく、特定のビューポートの幅に基づいての要素を隠す小さなCSSルールを作成する方がよいでしょう。

あなたは、列(s)は、そのクラスを持っている場合、それらの列の1の内部にあるものを非表示にする場合 - その後、あなただけのカラムがクラスを持っている場合、それらの要素を選択するだけに子孫セレクタまたは類似を使用することができます...

.col-xs-6 .something { display:none; } 

(これはもちろん、それ以上の特定のビューポートの幅とは関係を持っていない - しかし、あなたは、動的にクラスをトグルしているので、この場合は問題ないはずという。)

0

を@cBroeが言ったように、持っています非表示にしたい要素に対して.hidden-mdという既定のクラスを使用しようとしましたか?これはブートストラップv3で動作します。

関連する問題