Question

我有一个使用Bootstrap的网站。它已连续几天在线。然而就在今天，下拉菜单停止工作，菜单和正文之间有一个换行符。这个问题仅适用于我或使用Bootstrap的其他人。在导航栏之后，我有一个淡入的蓝色条带。是什么导致了这个问题，这只是我的问题吗？你是如何解决的？谢谢！

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">My Site</a>
    </div>
    <div class="collapse navbar-collapse net-27" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown Menu<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contribute</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class=""></span> Login</a></li>
        <li><a href="#"><span class=""></span> Sign Up</a></li>
      </ul>
    </div>
  </div>
</nav>

        <!-- Page Content -->
        <div class="container-fluid">
            <div class="row">

                            <center>

                                <div id="test" style="background-color:#001A57; color:#FFFFFF; font-family:Lucida Bright, Arial, sans-serif";>
                                    <p style="text-align:center;">Welcome!</p>
                                    <br /><p id="nothuge" class="plzplz"></p>
                                    <br />
                                    <p style="font-size:20px;">--Site Info--</p>
                                    <br /><p style="font-size:30px;">
                                    <a href="#">Login/Register</a></p>
                                </div>
                                <br />
                                <br />
                                <h1>Welcome</h1>
                            </center>
            </div>


            <!-- /.row -->

            <div class="row">

                    <center>
                    <p class="lead">Text</p>
                    <p class="intro-line2" id="bittearbeit">MoreText</p>
                    </center>
                </div>
            <footer class="margin-tb-3">
                <div class="row">
                    <div class="col-lg-12">
                        <p>© My Site 2017 | contact@my.site</p>

                    </div>
                </div>
            </footer>
        </div>
        <!-- /.container-fluid -->

</body>

（https://jsfiddle.net/user2015748/g776473m/1/）我有很多CSS，你可以在JSFiddle中看到。如您所见，导航栏后没有换行代码。再次感谢您的帮助！

Answer 1

你有一个CSS语句添加这一行。它是一个“保证金底部：20px;” 试试这个：

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

Bootstrap页面不起作用：额外的换行符和下拉菜单不起作用

1 个答案: