Question

我刚刚开始使用bootstrap 3，在玩布局时，我似乎无法在jumbotron h1标签内的手机上缩放文字。我试图在getbootstrap网站上复制jumbotron，该网站有大文本在视口更改时缩小。

    <div class="row">
  <div class="col-xs-12">
    <div class="jumbotron">
      <div class="container">
      <center><span class="h1">Testing Jumbotron </span></center>
      <div class="col-xs-2 col-xs-offset-5 btn-info btn btn-sm">Full</div>
    </div>
  </div>  
</div>
</div>

我刚刚看了一个例子，看起来标题确实在bootstrap 3中扩展......但也许是因为我使用flat-ui它打破了这个？

Answer 1

尝试将您的HTML更改为此。

<div class="container">
    <div class="jumbotron">
        <div class="row">
            <center><span class="h1 col-xs-10">Testing Jumbotron </span>

            </center>
            <div class="col-xs-2 btn-info btn btn-sm">Full</div>
        </div>
    </div>
</div>

最简单的方法是使用％或em中的维度。只需更改基本字体大小，一切都会改变。

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

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}

Answer 2

我所知道的是，如果你不在css中自己动手，引导程序就无法自动缩小文本。您是否尝试过添加媒体查询。示例

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
.h1 {
font-size:20px;
}
 }

bootstrap 3缩放文本

2 个答案: