如何防止我的H1标签移出视线（消失）？

-1

我最近并没有做过很多html和css，我无法弄清楚为什么当我重新调整浏览器的大小时，我的H1消失了。如何防止我的H1标签移出视线（消失）？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <script type="text/javascript src="Jquerry1_10_2.js"> </script> 
    <link rel="stylesheet" type="text/css" href="bootstrap.css" media="screen" /> 
    <link rel="stylesheet" type="text/css" href="LogIn_Page.css" media="screen" /> 
<!-- <script type="text/javascript src="LogIn_Page.js"> </script> --> 

</head> 
<body> 
    <div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container"> 

    <a href="http://somesite.com/" title="Web Site"> <img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px"> </a> 
    <a href="http://www.somesite2.org/" title="Web Site"> <img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;"> </a> 
    <a href="http://somesite3.com/" title="somesite Web Site"> <img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;"> </a> 

    </div> 

    <div class="container body-content" style="margin-top: 125px;"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <H1 style="margin-bottom: 50px;">Welcome to the Crops web application</H1> 
      <P>Please login:</P> 

      <button onclick="window.location.href=&quot;/auth&quot;" >Login link</button> 

      </div> 
     </div> 



    </div> 



    <div id="footer"> 

     <footer> 
     <script>window.onload = function() { 
     var d = new Date(); 
     var n = d.getFullYear(); 
     document.getElementById("date").innerHTML = "© " + n + " My company";}</script> 
      <p id="date"></p> 
     </footer> 
    </div> 
</body> 
</html>

这三个图像堆叠在一起，就像它们应该是一样，但它只是H1标签完全散布。我甚至没有使用任何自定义CSS，除了默认的引导程序包。

难道有人能指出我正确的解决方案吗？

我试着在H1标签里面放置以下样式：位置，浮点数，高度，宽度，最小高度，最小宽度，但没有一个对我来说似乎没有效果，当我缩小浏览器到最大。它当然是当浏览器全屏当然....

来源

2015-08-14 Vrankela

能否请您复制在小提琴的问题？ – Lal

您可以添加position: relative您navbar。

.navbar.navbar-inverse { 
 
    position: relative; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container"> 
 
    <a href="http://somesite.com/" title="Web Site"> 
 
    <img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px"> 
 
    </a> 
 
    <a href="http://www.somesite2.org/" title="Web Site"> 
 
    <img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;"> 
 
    </a> 
 
    <a href="http://somesite3.com/" title="somesite Web Site"> 
 
    <img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;"> 
 
    </a> 
 

 
</div> 
 
<div class="container body-content"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <h1 style="margin-bottom: 50px;">Welcome to the Crops web application</h1> 
 

 
     <p>Please login:</p> 
 
     <button onclick="window.location.href=&quot;/auth&quot;">Login link</button> 
 
    </div> 
 
    </div> 
 
</div>

来源

2015-08-14 17:11:39 vanburen

就是这样！简单优雅的解决方案。那么我应该把相对于所有div的位置吗？ – Vrankela

您可以将它放置在自定义样式表中（以便它可以在您的应用程序/网站上运行），也可以在需要的地方与您的导航栏内联。 – vanburen

它并没有消失，它只是因为它的巨大的大小屏幕。

尝试使用相应@media (max-width: _px) in CSS to change the position and text size of the h1`：

@media (max-width:300px){ 

    h1{ 
     text-size: _px/em/%; 
     <more styles here> 
    } 

}

所以当屏幕小于300像素，它会风格，无论你摆在那里H1。

来源

2015-08-14 17:08:49

它并没有消失，它只是由导航栏覆盖。当导航栏元素堆叠并展开导航栏时，您需要添加更多的余量。例如

<div class="container body-content" style="margin-top: 300px;">

会使它出现。但是，您需要将其放入媒体查询中。有了您的固定图像宽度这些查询添加到样式部分将

@media (max-width: 732px) { 
    .body-content { 
     margin-top: 225px !important; 
    } 
} 

@media (max-width: 499px) { 
    .body-content { 
     margin-top: 325px !important; 
    } 
}

来源

2015-08-14 17:11:32 potatopeelings

如何防止我的H1标签移出视线（消失）？

回答

相关问题