Question

我对网站代码的情况感到非常困惑。问题是，当我将我的徽标添加到导航栏时，它会使与导航栏右侧对齐的选项卡消失。

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
  <link href="animate.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rancho&effect=outline">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rancho&effect=	ice">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Rendered-Homepage</title>
</head>

<style>
  .body {
    font-family: Jura, serif;
  }
  
  .navbar {
    overflow: hidden;
    background-color: #ffffff;
    position: fixed;
    /* Set the navbar to fixed position */
    top: 0;
    /* Position the navbar at the top of the page */
    width: 100%;
    /* Full width */
    z-index: 999;
  }
</style>

<body>

  <div class="Rendered" style="">

    <!--Navigation Bar-->

    <div class="Navigation">
      <nav class="navbar " style="height: 65px; background-color: #ffffff;; font:Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', 'sans-serif'; text-transform: uppercase; margin-bottom: 0px; width: 100%; ;">
        <div class="container-fluid">

          <!--Rendered - Logo-->

          <div class="navbar-header">
            <a class="navbar-brand" href="#"><img src="Images/Rendered-Logo-(Version-2).png" alt="Rendered-Logo" style="width: 10%; height: auto; margin-right: 0;"></a>
          </div>

          <!--Navigation Bar Tabs-->

          <ul class="nav navbar-nav navbar-right" style="margin-left: 0; padding: 5px; font-size: 15px; color: black;">
            <li><a href="#">Couses</a></li>
            <li><a href="#">Community</a></li>
          </ul>

        </div>
      </nav>
    </div>
  </div>
</body>

</html>

＆＃13;

我知道代码不是最干净的，我为此道歉。如果有人告诉我为什么我遇到这个问题我会如何解决它，我真的很感激。问候

Answer 1

假设您指的是“课程”和“社区”标签。如果您的屏幕小于768像素，它们只会消失。

要保留它，您可以尝试：

    @media (min-width: 768px) {
        .body {
            font-family: Jura, serif;
        }

        .navbar {
            overflow: hidden;
            background-color: #ffffff;
            position: fixed;
            /* Set the navbar to fixed position */
            top: 0;
            /* Position the navbar at the top of the page */
            width: 100%;
            /* Full width */
            z-index: 999;
        }

    }

将它们放在一行中尝试放入容器中：

                <!--Navigation Bar Tabs-->
                <div class="container">
                    <div class="navbar-collapse collapse" id="collapsingNavbar">
                        <ul class="navbar-nav">
                        </ul>

                        <ul class="nav navbar-nav ml-auto" style="margin-left: 0; padding: 5px; font-size: 15px; color: black;">
                        <li><a href="#">Couses</a></li>
                        <li><a href="#">Community</a></li>
                    </ul>
                    </div>
                </div>

Answer 2

将logo和navbar放在.navbar-header内，并为您的标题应用width:100%。这将解决问题。

    <div class="navbar-header">
        <a class="navbar-brand" href="#"><img src="Images/Rendered-Logo-(Version-2).png" alt="Rendered-Logo" style="width: 10%; height: auto; margin-right: 0;"></a>            
        <ul class="nav navbar-nav navbar-right" style="margin-left: 0; padding: 5px; font-size: 15px; color: black;">
           <li><a href="#">Couses</a></li>
           <li><a href="#">Community</a></li>
        </ul>
    </div>

<强> CSS

 .navbar-header {width:100%;}

FIDDLE DEMO

Tab键的Disapper当我将Logo放在Navbar上时

2 个答案: