Question

我最近没有做过很多html和CSS，而且当我重新调整浏览器的大小时，我无法弄清楚为什么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="Jquery1_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，除了默认的bootstrap包。

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

我尝试在H1标签内部放置以下样式：位置，浮动，高度，宽度，最小高度，最小宽度，但这些似乎都不适用于我只是在我缩小浏览器大小时消失到最大当浏览器全屏时当然......

Answer 1

您可以将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>

Answer 2

它并没有消失，只是因为它的巨大尺寸而离开屏幕。

相应地尝试使用@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>
    }

}

因此，当屏幕小于300px时，它会将h1设置为您放置的任何内容。

Answer 3

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

<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;
    }
}

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

3 个答案: