jquery - Bootstrap 导航栏向上打开

Question

我在 bootstrap 3 中为客户的网站创建了一个导航栏。然而，出于某种原因，导航栏在移动界面上向上打开，将其部分内容抛出屏幕。

<div id="mainWrapper">
    <div id="navbar" class="row">
            <div id="mainLogo" class="col-xs-3"><p class="bottom-text">LOGO PLACEHODER</p></div>
            <div id="spacer" class="col-xs-3"></div>
            <div id="menu" class="col-xs-6">
                <nav id="rightnav" class="navbar navbar-default bottom-text">
                    <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>
                            </div>
                            <div class="collapse navbar-collapse" id="myNavbar">
                            <div>
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">Page 1</a></li>
                                <li><a href="#">Page 2</a></li> 
                                <li><a href="#">Page 3</a></li> 
                            </ul>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
    </div>

http://jsfiddle.net/tonykuroi/5n8fcwmv/

关于此的事情是，虽然我知道 CSS 有点怪异(而且坦率地说是丑陋的)- 我需要让网站看起来有一种特定的方式。客户是一位艺术家，她完全拒绝对她的设计进行任何更改。

我正在寻找的是一种将内容向下推而不是向上推的方法。

谁能看到可能导致奇怪行为的原因？

Answer 1

是这个类引起的

.bottom-text{
    position: absolute;
    bottom: 0;
}

将其修复为:

.bottom-text{
    padding-top: 70px;
}