web-dev-qa-db-ja.com

Bootstrap表示および非表示のクラスが正しく機能していません

Bootstrap visibleおよびhiddenクラスを使用して、モバイル/デスクトップでのみ表示されるコンテンツを作成しようとしました。クラスが適切に機能していないことに気付きました（そして多くの人がこの問題を抱えており、この方法で解決していることに気付きました）。

これは私の現在のコードです：

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

これで、.mobileがモバイル画面に表示され、幅が900ピクセル以下になります。 Bootstrapクラスを他のdiv .containerdivに使用しましたが、これは今のところ機能しますが、自分のモバイルCSSシートにhidden-xsの値を追加した場合のみ;

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

.mobile divは900px以下の画面に表示されるはずですが、まだ表示されません。なぜそうならないのかわかりません。display:blockを使用するのが正しいのでしょうか？ visible-xsとvisible-smを追加しても何も起こりません。

これを行う適切な方法は何ですか、なぜ私のバージョンは機能しませんか？

htmlcsstwitter-bootstrapresponsive-design
29
Jane

.mobile divには、次のスタイルがあります。

.mobile {
    display: none !important;
    visibility: hidden !important;
}

したがって、visibilityプロパティをvisibleでオーバーライドすることに加えて、displayプロパティをblockでオーバーライドする必要があります。そのようです：

.visible-sm {
    display: block !important;
    visibility: visible !important;
}
18
Graham Langdon

CSSは不要です。可視クラスは次のようにする必要があります。visible-md-blockだけでなくvisible-mdであり、コードは次のようになります。

<div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">

        </div>
    </div>
</div>

<div class="mobile hidden-md hidden-lg ">
    test
</div>

余分なCSSはまったく必要ありません。

7
Adarsh Gowda K R

Cssで表示テーブルプロパティを指定すると、いくつかのdiv bootstrap隠しクラスはそのdivに影響しません

1
simranjit

モバイルクラスが正しくありません：

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}
1
Jop

本日現在2017年11月
Bootstrap v4-ベータ版

レスポンシブユーティリティ

すべての@ screen-変数はv4.0.0で削除されました。代わりに、media-breakpoint-up（）、media-breakpoint-down（）、またはmedia-breakpoint-only（）Sassミックスインまたは$ grid-breakpoints Sassマップを使用してください。

V3から削除：.hidden-xs。hidden-sm.hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible -lg-block .visible-lg-inline .visible-lg-inline-block

V4アルファから削除：.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden- lg-down

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

0
jriver27