无法在Bootstrap中隐藏<br>标签

Question

由于某些原因，我无法隐藏 <br> 标签，这些标签只会在小屏幕尺寸上显示。它不会在小屏幕上显示，但对于其他屏幕尺寸和其他标签有效。似乎是与小屏幕尺寸下的 <br> 标签有关。

 <div class="row">
  <img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
  <img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
  <img src="static/works_3.jpg" class="img-responsive works-photo col-md-4 col-sm-12"><br class="hidden-xs hidden-md hidden-lg">
 </div>

- Scott

---

请注意，使用换行符来定位、格式化和清除内容的任务更适合于CSS而不是HTML，因此您可能根本不想使用<br>。请参见此 SO讨论。 - danyamachine

Answer 1

将<br>替换为<div class="hidden-xs hidden-md hidden-lg"></div>

这应该有所帮助

- sglazkov

---

建议将其包装为<div class="hidden-xs hidden-md hidden-lg"><br></div>。 - bart

Answer 2

Bootstrap 4中已经取消了这些类，如hidden-md等。请使用以下替代方案：.d-sm-none .d-md-block

- lukyer

Answer 3

这对我有用。 <br class="hidden-xs"/> 希望能帮到你！

- elmondino

Answer 4

你可以按照以下步骤进行：

<br class="d-none d-sm-inline" />

但它可能不是跨浏览器的。

- Yatko

---

这将隐藏所有尺寸。 - AG_HIHI

Answer 5

使用Bootstrap 5：

<br class="d-md-none">

为了只在大屏幕及以上设备上显示，可以这样做：

<br class="d-none d-lg-block">

https://getbootstrap.com/docs/5.1/utilities/display/#hiding-elements

- Christian Fröhlich

Answer 6

通常我不会给换行标签设置样式。我的 SASS 通常是这样的。在这种特殊情况下，我只在较大的屏幕即“lg”和以上断点上显示，并且否则隐藏换行标签。

这样可以保持清晰的标记。例如：

I usually don't give classes to line break tags. My sass is usually like this. In this particular case, I am showing on larger screens i.e 'lg' and above breakpoints. I am hiding the line break tag otherwise. 

这可以保持标记的清晰。例如：

br {
    display: none;
    @include media-breakpoint-up(lg) {
      display: block;
   }
 }

- Fahad