问题
I just moved from bootstrap 4 alpha to beta, but I can't figure out how to hide an element on a small screen now. In the alpha this was "hidden-md-up" and "hidden-sm-down" which worked beautifully. "hidden-md-up" is now "d-md-none", but the other one I can't get to work
<div class="d-md-block d-xs-none d-sm-none">Show on large screen only - NOT working for me</div>
<div class="d-md-none">Show on small screen only</div>
Any ideas?
回答1:
A short break, cup of coffee later I figured it out: Adding the class "d-none d-md-block" will do the trick
<div class="d-none d-md-block">Show on large screen only works now</div>
<div class="d-md-none">Show on small screen only</div>
Read more about responsive display utilities at the Bootstrap 4 Documentation.
回答2:
I'm only adding this as an answer because it got too long for the comment...which was a reply to @Kian.
Since bootstrap [4] is "mobile-first", you start there.
So the question is, "do you want to show this on XS breakpoint?":
- If yes, no d-* classes needed as it will be shown on XS and all sizes bigger.
- If no, then do
d-none.
When you move to the next breakpoint [SM], ask yourself, "do I want to show this on SM breakpoint?".
- If yes and it's show for XS too, then no changes.
- If yes and XS was hidden (with
d-none), then you need to dod-sm-block. - If no and XS was shown, then do
d-sm-none. - If no and XS was hidden, then no changes.
Rinse-repeat for each breakpoint that is bigger where the display property is different than the previous/smaller breakpoint
Here are some examples:
<div class="d-none d-md-block">Show on medium, and bigger, screen sizes</div>
<div class="d-md-none">Show on extra small and small screen sizes</div>
<div class="d-none d-md-block d-lg-none">Show on ONLY medium screen sizes</div>
<div class="d-none d-sm-block d-md-none d-xl-block">Show on ONLY small and extra large screen sizes</div>
Here's a fiddle
回答3:
I was trying to use the d-propeties to show diffentes logos in differents breakpoint, I tried d-none d--block" , but it didn't work, only works d-none-. Then I realized that I was appling the class to the .img. So you can use d-none-* (hide) to any element, but to display element d-*-block only work in a wrapper element like div. I hope it help.
来源：https://stackoverflow.com/questions/45687643/how-to-hide-element-on-small-screens-with-bootstrap-4-beta