Question

我正在尝试在大型设备上将文本设置为全宽，然后将其堆叠在具有较大文本的移动设备上。

我意识到如果浏览器很小，我可以为大文本显示无效，然后为小设备设置三个文本块到col-12，但这似乎是很多html重复。有没有更好的方法来解决这个问题？

我的代码如下。我知道我可以使用小型设备的引导覆盖来覆盖字体大小。我只需要帮助堆叠字体。

我在此处添加了代码：http://codepen.io/anon/pen/pRQZdR

<h1 class="title-text-md col-lg-12"><strong>Example Text to Be stacked with larger font on mobile</strong></h1>


 @include media-breakpoint-up(sm) {
      .title-text-md {
         font-size: 20px;
       }
    }

Answer 1

添加此css这可能会成功。

@media (max-width: @screen-xs) {
h1{font-size: 30px;}
}

@media (max-width: @screen-sm) {
h1{font-size: 4px;}
}
   @media (max-width: @screen-md) {
h1{font-size: 400px;}
}
 @media (max-width: @screen-md) {
h1{font-size: 40px;}
  }
 h1{
font-size: 1.4em;
  }

希望这有帮助！

使用Bootstrap堆叠文本组件而不复制HTML

1 个答案: