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

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

希望这会有所帮助！