问题:
我正在构建一个响应式网站，当窗口变小时，第一部分会弹出并覆盖标题。
问题总结:
第一部分在调整大小时覆盖标题。
问题:表述清楚
我想知道发生这种情况的原因以及如何解决它。
CodePen 示例重现问题:
http://codepen.io/anon/pen/MwQGBM
-包含代码-
HTML:
<head>
<title>High Performance Floors | Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<section id="wrapper">
<!--=====================================================
START Navigation
======================================================-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">High Performance Floors</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Architects & Builders</a></li>
<li><a href="#contact">Image Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!--=====================================================
END Navigation
======================================================-->
<!--=====================================================
START Header
======================================================-->
<header class="main-header"><img src="images/icons/logo2.png"></header>
<!--=====================================================
End Header
======================================================-->
</section>
<!--=====================================================
START Main Container
======================================================-->
<section>
<div class="row">
<div class="col-md-7">
<div class="block-light block-shadow">
<h3>Extreme Flooring and Surfaces</h3>
<p>High Performance Floors of Jacksonville, Florida, is a locally owned and family-operated business specializing in both residential and commercial concrete and surface-coating solutions.</p>
<p>We are a small group of highly motivate individuals who aim to provide our customers with the best service, products and overall experience in the market. To have one of our representatives assist you with your concrete flooring and surface
requirements please contact us by calling (904) 386-2089 or fill out our Online Quote Request Form for a quick email response.</p>
</div>
</div>
<!-- End Col -->
<div class="col-md-5">
<div class="block-light block-shadow">
<h3>Extreme Concrete</h3>
<img class="pull-left" src="images/icons/main_page_sub_image1_stain.png">
<h4>Acid Stained:</h4>
<p>Kemiko Stone Tone Stain transforms an ordinary concrete slab into a luxurious floor that resembles marble or glazed stone at a fraction of the cost.</p>
</div>
</div>
</div>
<!-- End Row -->
</section>
<!--=====================================================
END Main Container
======================================================-->
最佳答案
从 css/Sass 的 .main-header 中删除:“float: left;”，它将解决您的问题。
关于html - Div 弹出标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31192253/