Question

使用响应式Twitter bootstrap。

我有一个3跨度3的页面：

<body>
<div id="wrap">

<div class="container">
    <div class="row">
       <div class="span3">
          <img src="~/Images/logo.png" alt="Logo" />
          <br /><br /></div>
       <div class="span3 cfnav">
          <ul class="nav nav-tabs nav-stacked">
             <li><a href="#">Home</a></li>
             <li><a href="#">Info1</a></li>
             <li><a href="#">Info2</a></li>
             <li><a href="#">Info3</a></li>
             <li><a href="#">Info4</a></li>
          </ul>
       </div>
       <div class="span6" style="background-color:green;"><br /><br /></div>
</div></div></div></body>

徽标会根据页面的响应宽度自动调整大小。然而，文本保持相同的大小 - 在更大的宽度上超出其DIV。

有没有办法将文本大小设置为动态更改 - 因为图像会延伸到span3 div内？（无需在每个媒体查询宽度上手动设置文本大小）

Answer 1

你可以看一下使用rem单位进行文本大小调整，虽然需要大量调整Bootstrap：http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/

根据响应的DIV span3宽度更改文本大小

1 个答案: