Question

最初的代码块......

<div class="content row">
  <img width="33%"  class="img-thumbnail img-rounded" src="foo">
  <img width="33%"  class=" img-thumbnail img-rounded" src="bar" >
  <img width="33%"  class=" img-thumbnail img-rounded" src="baz" >
</div>

用户请求后将某些页面DOM事件更改为HTML代码块...

<div class="content row">
  <img width="33%" class="img-thumbnail img-rounded center-block" src="foo">
  <img width="33%" class=" img-thumbnail img-rounded" src="bar"  hidden="">
  <img width="33%" class=" img-thumbnail img-rounded" src="baz" hidden="">
</div>

当页面呈现隐藏的图像仍然显示？如果删除img-类，则标记为隐藏的图像不会按预期显示。但是，我想要img-引导类。

如何隐藏应该隐藏的图像？

PS-我正在使用Bootstrap 3.1.0

Answer 1

这将是

<div class="content row">
  <img width="33%" class="img-thumbnail img-rounded center-block" src="foo">
  <img width="33%" class=" img-thumbnail img-rounded hidden" src="bar">
  <img width="33%" class=" img-thumbnail img-rounded hidden" src="baz">
</div>

您也可以参考Helper Class of Bootstrap了解更多类似的课程

Answer 2

http://getbootstrap.com/css/#helper-classes-show-hide

显示和隐藏内容

强制显示或隐藏元素（包括屏幕阅读器）   使用.show和.hidden类。这些类使用   ！重要的是避免特异性冲突，就像快速浮动一样。   它们仅适用于块级切换。他们也可以   用作mixins。

.hide可用，但它并不总是影响屏幕阅读器和   自v3.0.1起不推荐使用。请改用.hidden或.sr-only。

此外，.invisible可用于仅切换可见性   一个元素，意味着它的显示不被修改，元素可以   仍会影响文件的流程。

“hidden”是一个类名。您可以将其作为一个类应用。

Answer 3

bootstrap documentation告诉您使用以下内容。

使用.show和.hidden类强制显示或隐藏元素（包括屏幕阅读器）。这些类使用！important来避免特异性冲突，就像快速浮动一样。它们仅适用于块级切换。它们也可以用作mixins。

.hide可用，但它并不总是影响屏幕阅读器，自v3.0.1起不推荐使用。请改用.hidden或.sr-only。

此外，.invisible可用于仅切换元素的可见性，这意味着它的显示不会被修改，元素仍然可以影响文档的流程。

Answer 4

由于您使用的是bootstrap，因此您可以像这样使用hide类。

<div class="content row">
  <img width="33%" class="img-thumbnail img-rounded center-block" src="foo">
  <img width="33%" class=" img-thumbnail img-rounded hide" src="bar">
  <img width="33%" class=" img-thumbnail img-rounded hide" src="baz">
</div>

您还可以将隐藏类用于不同的设备，例如hidden-sm，hidden-lg等。

隐藏属性在引导程序中不起作用

4 个答案: