Question

我是新手，我试图弄清楚为什么我的菜单在较小的屏幕上重叠我的图片而不是推倒它。我希望在所有屏幕尺寸上都有一个固定的菜单，它在桌面尺寸上很好，实际上固定在768px上。但是它需要在较小的尺寸上垂直向下推动内容，现在它已经超越了我的图片。我已经看到post表示要更改为静态标题，我试过，但在桌面上丢失了固定的标题，并且在较小的屏幕上展开菜单时仍然没有按下图片。或许我的基本结构可能与我的css相反，因为我还没有真正用css设计小尺寸屏幕，因为它看起来像是一种不同类型的问题。我希望始终保持固定的标题，并使用三明治菜单将内容放在较小的尺寸上，我认为这是一个更正常的过程。 Bootstrap是v3.3.7 任何见解将不胜感激

<!DOCTYPE html>
    <html lang="en">
      <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/head-wrapper.css" rel="stylesheet" type="text/css">
    <link href="css/navbar1.css" rel="stylesheet" type="text/css">
    <link href="css/menu.css" rel="stylesheet" type="text/css">
    <link href="css/first-picture.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>
  <body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="top-header"><div class="top-header">
  <div id="header-wrapper">
    <div class="telephone-icon"><span class="glyphicon glyphicon-phone-alt"></span></div>
    <div class="tele-number"><a href="tel:+15302731343" target="new">530-273-1343</a></div>
    <div class="email-icon"><span class="glyphicon glyphicon-envelope"></span></div>
    <div class="email-address"><a href="mailto:churchoffice@cbc.org">Email CBC</a></div>
  </div>
</div></div>
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="topFixedNavbar1">
        <ul class="nav navbar-nav">

        <li><a href="#">I'm New</a></li>
          <li><a href="#">Beliefs</a></li>
          <li><a href="#">Ministries</a></li>
          <div class="menu-picture"><span class="navbar-brand" href="#"><a href="http://www.gvcbc.org" target="_self"><img src="images/GBCBC-LOGO2.jpg" alt="My Logo"></a></span></div>
          <li><a href="#">Missions</a></li>
          <li><a href="#">Sermons</a></li>
          <li><a href="#">News/Events</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<div class="container-fluid test">
  <div class="first-picture"><img src="images/sermon.jpg" width="960" height="600" alt=""/></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
  </body>
</html>

在小屏幕上bootsrap菜单重叠内容

0 个答案: