Html 为什么可以'；我不能隐藏我的br标签吗？

我在我的

h1

标签中添加了一个

，该标签仅在xl屏幕（>1600px）上可见

然而，

始终显示，当我希望它响应XL类（

可见XL

）时

实时URL:

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
}

<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> 

@screen xl:1600px；
@屏幕xl最小值：@屏幕xl；
@屏幕xl桌面：@屏幕xl分钟；
@屏幕lg最大值：（@屏幕xl最小值-1）；
@容器xl桌面：（（1560px+@网格槽宽度））；
@容器xl:@容器大桌面；
@介质（最小宽度：@屏幕xl最小值）{
.制作网格（xl）；
}
.集装箱{
@介质（最小宽度：@屏幕xl最小值）{
宽度：@集装箱xl；
}
}
.make xl列（@列；@边沟：@网格边沟宽度）{
位置：相对位置；
最小高度：1px；
左侧填充：（@gatter/2）；
右侧填充：（@gatter/2）；
@介质（最小宽度：@屏幕xl最小值）{
浮动：左；
宽度：百分比（（@columns/@grid columns））；
}
}
.使xl列偏移（@列）{
@介质（最小宽度：@屏幕xl最小值）{
左边距：百分比（（@columns/@grid columns））；
}
}
.推动xl列（@columns）{
@介质（最小宽度：@屏幕xl最小值）{
左：百分比（（@columns/@grid columns））；
}
}
.使xl柱拉力（@柱）{
@介质（最小宽度：@屏幕xl最小值）{
右：百分比（（@columns/@grid columns））；
}
}
.可见xl{
.响应性-隐身性（）；
@介质（最小宽度：@屏幕xl最小值）{
.响应性-可见性（）；
}
}
.隐藏xl{
@介质（最小宽度：@屏幕xl最小值）{
.响应性-隐身性（）；
}
}
.make-grid-columns（）{
//所有尺寸网格柱的通用样式，宽度1-12
.col（@index=1）{//initial时（@index）
@项目：~“.col xs-@{index}、.col sm-@{index}、.col md-@{index}、.col lg-@{index}、.col xl-@{index}”；
.col（（@index+1），@item）；
}
.col（@index，@list）当（@index=<@grid columns）{//general=
使用两个
标记可能对SEO有害
两个
元素具有相同的
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>

注意：根据需要更改您的属性或值！并考虑删除第二个
两个
h1
标记？！即使您将其隐藏，spider也会读取两个标记！只有一个。不，打开OP的链接，您将看到两个h1、@GoombahLooks，就像您没有在较小的屏幕上隐藏它一样。谢谢大家，我现在已切换到一个标记，其中只有一个
可见在XL（>1600px）屏幕上。我相应地更新了我的问题。“它无效。”"那不是真的。在一个文档中有多个
元素是完全有效的。谷歌将
h1
标记视为页面内容的线索。如果你有多个
h1
标记和不同的关键字，那么谷歌很难将页面上下文化。@TylerH，我不是说在
html我说的是
SEO
/而且它在
HTML4
中无效，仅在
HTML5
@TylerHIt在HTML4中也有效。没有提到对
元素的使用次数有任何限制。这一概念纯粹是试图找到某种SEO神奇解决方案的人捏造的，而这种解决方案本身就是如此是一个很大程度上基于观点的领域。我没有看到任何提及，但我在其他有效的网站上读了很多次。在这一个
中也是如此。你现在可以通过HTML5使用所需的任意多组标签。但这并不意味着它们应该在任意位置自由添加。
外部网站没有资格说明是否有人不这样做使用工作组定义的语言可以完成，也不能完成。当您对是否可以完成某项工作感到好奇时，请查阅规范；它实际上是一本规则手册。作为示例，请参阅本文，完全反驳您刚才提到的文章：