html - 在不复制 HTML 的情况下使用 Bootstrap 堆叠文本组件

Question

我试图让文本在大型设备上显示为全宽，然后在移动设备上以更大的文本堆叠。

我意识到我可以做一些事情，比如如果浏览器很小，则大文本不显示，然后为小设备将三个文本 block 设置为 col-12，但这似乎有很多 html 重复。有没有更好的方法来解决这个问题？

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

我在这里包含了一个依赖项: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;
  } 

希望这对您有所帮助!