2017-10-07 7 views
1

私はページに2つのメインディビジョンを持っており、ユーザーがタブレット/携帯電話から来た場合には隠したいと思っています。 中/小解像度でdivを表示しない

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<div class="contrainer row"> 
 
    <div class="col-lg-6 col-md-12"> 
 
    SHOW ME ALWAYS! 
 
    </div> 
 
    <div class="col-lg-6 hidden-md-down"> 
 
    HIDE ME ON SMALL 
 
    </div> 
 
</div>
は、残念ながら、それは動作しません。

documentationに基づいて、私のようなものを試してみました。 2番目のdivは常に表示されます。私が間違っていることは何か考えていますか?

+0

あなたが含まれているCSSが 'beta' – Bill

+0

' bootstrap/4.0.0-alpha.6'バージョンを使用しているので、 'hidden-md-down 'クラス。ベータ版では不可能です。 –

答えて

0

4.0.0-betaは、もはやhidden-*を持ち、参照Migrating to v4

レスポンシブユーティリティクラスの大部分は、明示的なディスプレイユーティリティの賛成で削除されていません。

jQueryの$(...)。hide()および$(...)。show()メソッドと競合するため、.hiddenクラスと.showクラスが削除されました。代わりに、[hidden]属性を切り替えるか、style = "display:none;"のようなインラインスタイルを使用してみてください。とstyle = "display:block;"となります。

+0

ありがとう、何とか私はそれを逃した。したがって、純粋なCSSによって画面の解像度に基づいてそれを行う方法はありませんか? – Andurit

+0

それでも、 'hide'の代わりに' display'になっています。 [この移行](https://getbootstrap.com/docs/4.0/migration/#utilities)を参照してください。 – Bill

関連する問題