html - 为什么我不能隐藏我的 br 标签？

Question

我添加了一个 <br>进入我的h1标签仅在 xl 屏幕(>1600 像素)上可见。

<br>但是一直显示，当我希望它响应 XL 类 ( visible-xl ) 时。

实时网址: http://185.123.96.102/~kidsdrum/moneynest.co.uk/

CSS:

@screen-xl:                  1600px;
@screen-xl-min:              @screen-xl;
@screen-xl-desktop:          @screen-xl-min;
@screen-lg-max:              (@screen-xl-min - 1);
@container-xl-desktop:       ((1560px + @grid-gutter-width));
@container-xl:               @container-large-desktop;

@media (min-width: @screen-xl-min) {
  .make-grid(xl);
}

.container {
  @media (min-width: @screen-xl-min) {
    width: @container-xl;
  }
}

.make-xl-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-xl-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

.make-xl-column-offset(@columns) {
  @media (min-width: @screen-xl-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}

.make-xl-column-push(@columns) {
  @media (min-width: @screen-xl-min) {
    left: percentage((@columns / @grid-columns));
  }
}

.make-xl-column-pull(@columns) {
  @media (min-width: @screen-xl-min) {
    right: percentage((@columns / @grid-columns));
  }
}

.visible-xl {
  .responsive-invisibility();
  @media (min-width: @screen-xl-min) {
    .responsive-visibility();
  }
}

.hidden-xl {
  @media (min-width: @screen-xl-min) {
    .responsive-invisibility();
  }
}

.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) when (@index = 1) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
  }
  .col(1); // kickstart it
}

HTML:

<h1 class="boldme hidden-xs hidden-sm hidden-xl" id="homepage-headline">Wish you were taught personal finance at school?<br class="visible-xl"/>We do too</h1> 

**注意:**我正在使用 Bootstrap

Answer 1

1. 使用两个 <h1>标签可能对 SEO 有害。
2. 两者都是 <h1>元素具有相同的 ID , 这是无效的标记；文档中的每个 ID 都必须是唯一的。

我的解决方案:

HTML

<div class="text-center">
    <h1 class="boldme hidden-xs hidden-sm hidden-xl" id="homepage-headline">Wish you were taught personal finance at school? We do too</h1> 
    <h1 class="boldme visible-xl" id="homepage-headline2">Wish you were taught personal finance at school?<br>We do too</h1> 
</div>

CSS:

.hidden-xs .hidden-sm {
    display: none;
}

@media all and (max-width: 1600px) {
    .hidden-xs .hidden-sm {
        display: block;
    }

    .visible-xl {
        display: none;
    }
}

注意:根据需要更改您的属性或值!并考虑删除第二个 <h1>