如何摆脱额外的Bootstrap导航栏?

时间:2018-12-18 15:45:46

标签: css twitter-bootstrap meteor navbar

将近三周没看过我的Meteor代码,今天早晨启动我的Meteor应用程序时,我很快注意到了一些奇怪的地方。现在,我打算启动的Bootstrap导航栏下有一个意外的 Bootstrap导航栏。我不明白这是怎么回事。

所以我目前有两个导航栏,如下图所示。

An image showing a bootstrap designed page with an extra unintended Bootstrap Navigation Bar at the bottom of the intended one

请澄清一下,最上面的一个是预期的导航栏,而下面的一个是偶然的导航栏。

我在哪里出错了,以及如何删除底部的那个?

client / main.html

<template name="hello">

<nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>    
      </div>

      <div class="navbar-collapse collapse hiddenNavBar">
        <ul class="nav navbar-nav navbar-left">

                <div class="navbar-brand"> {{pageTitle}} </div>

            <li><a id="makePayment" > <img src="../images/makePaymentWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Make Payment  </a></li>
            <li><a id="PendingPayments"> <img src="../images/pendingWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Pending</a></li>
            <li><a id="Notifications" > <img src="../images/notificationsWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Notifications </a></li>
        </ul>

        <ul class="nav navbar-nav navbar-right"> 
          <li><a id="ShowStatement" > <img src="../images/statementWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Statement</a></li>
          <li><a id="onlinePresence" > <img src="../images/onlinePresence.png" style= "width:25px;height:25px;margin-right: 13px;" > onlinePresence</a></li>      
          <li><a id="Settings" > <img src="../images/settingWhite.png" style= "width:25px;height:25px;margin-right: 13px;" > Settings</a></li> 
          <li><a id="HelpAndFeedback" > <img src="../images/help&feedback.png" style= "width:25px;height:25px;margin-right: 13px;" > Help and Feedback</a></li> 
          <!-- <li> <a id="SendInvoice"> <span class="glyphicon glyphicon-gift"></span>  Send Invoice</a></li> -->
        </ul>

      </div>
</nav>

</template>

我的帮助页面

client / main.js

Template.hello.helpers({

    'pageTitle': function () {

        var title = "Make Payments To";

    return title;

    },

});

以及相关的CSS文件部分:

client / main.css

.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

0 个答案:

没有答案