当调整大小(更小)时，bootstrap中的H1标签会溢出hero-unit

我在bootstrap中添加了一个hero-unit，并添加了一个h1标签。当我把屏幕变小时，h1标签就会从英雄单元流出来?

嗨，谢谢，这是html

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hero test</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
    <header class="span12 hero-unit">
    <img src="img/white.png" alt="Etc
    "class="pull-right" />
    <h1>Art Conference</h1>
    <p></p>
    <p><a href="#">Learn more</a></p>
    </header>
     </div>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

您可以根据屏幕大小重新调整h1的font-size

.hero-unit h1{
     font-size: 4.4vw;
 }

注:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

相关内容

最新更新

热门标签：