我添加了一个 <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
最佳答案
- 使用两个
<h1>
标签可能对 SEO 有害。 - 两者都是
<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>
关于html - 为什么我不能隐藏我的 br 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36429713/