twitter-bootstrap 如何在 Bootstrap 3 的移动/平板电脑视图中隐藏某些内容?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27962534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:09:30  来源:igfitidea点击:

How to hide something in mobile/tablet view in Bootstrap 3?

twitter-bootstraptwitter-bootstrap-3

提问by NathonJones

I have a button in my Carousel slider that I would like displayed for desktop but hidden for mobile/tablet devices: http://www.doorsets.org.uk/index.php

我的旋转木马滑块中有一个按钮,我希望在桌面上显示但在移动/平板设备上隐藏:http: //www.doorsets.org.uk/index.php

Is this possible in Bootstrap 3? I'm aware that i can obviously change columns depending on devices, but I'm not clear on how to hide/display sections depending on the device.

这在 Bootstrap 3 中可能吗?我知道我显然可以根据设备更改列,但我不清楚如何根据设备隐藏/显示部分。

Would appreciate any advice that could be offered. Also, is there a good Bootstrap 3 forum/s that you'd recommend?

将不胜感激,可以提供任何建议。另外,您是否推荐了一个很好的 Bootstrap 3 论坛?

Much appreciated NJ

非常感谢新泽西州

回答by morganjlopes

Here is the documentation I believe you're looking for:

这是我相信您正在寻找的文档:

http://getbootstrap.com/css/#responsive-utilities-classes

http://getbootstrap.com/css/#responsive-utilities-classes



You'll want to wrap the content you want to hide/show the desired class.

您需要包装要隐藏/显示所需类的内容。

For example, if you want to hide a section on small(tablet) screens:

例如,如果您想隐藏小(平板电脑)屏幕上的某个部分:

<section class="hidden-sm">
    <p>This content won't be visible on a tablet, or screen resolution ≥768p and < 992px</p>
</section>

Conversely, if you only want to show something on a tablet:

相反,如果您只想在平板电脑上显示某些内容:

<section class="visible-sm">
    <p>This content will only be visible on a tablet, or screen resolution ≥768px and < 992px</p>
</section>


For your button, something like this will only appear on medium and large screens:

对于您的按钮,类似这样的内容只会出现在中型和大型屏幕上:

<div class="btn btn-primary visible-md visible-lg">Carousel Button</div>