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;
}

Answer 2

只需更改此部分：

<nav id="rightnav" class="navbar navbar-default bottom-text">

到

<nav id="rightnav" class="navbar navbar-default top-text">

bottom-text更改为top-text。

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

Answer 3

Bootstrap是一个响应式CSS框架;菜单将在移动屏幕中采用另一种形式，因此您不需要任何其他CSS来执行此操作。看一个简单的例子：

p {
    color:white;
}
/******************** IDs **********************/
 #contentPane {
}
#mainWrapper {
    max-width:775px;
    background-color:black;
}
#navbar {
    margin:0px;
    max-width:775px;
    height:120px;
    background:url('../images/top_background.jpg') no-repeat;
}
#rightnav {
    right:0;
}
#spacer {
    height:100%;
}
#menu {
    height:100%;
}
#mainLogo {
    height:100%
}
#footerText {
    text-align:right;
    margin-top:15px;
}
#footer {
    height:50px;
}
/**************** Classes **********************/
 .row {
    position:relative;
}
.bottom-text {
    padding-top: 70px;
}
.navbar, .navbar-default, .nav, .navbar-nav {
    background-color:transparent;
    border-color:transparent;
    margin-bottom:0px;
}
.active {
    background-color:transparent;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background-color:transparent;
}

<div id="mainWrapper">
    <div id="navbar" class="row">
        <div id="mainLogo" class="col-xs-3">
            <p class="bottom-text">LOGO PLACEHOLDER</p>
        </div>
        <div id="spacer" class="col-xs-3"></div>
        <div id="menu" class="col-xs-6">
            <nav id="rightnav" class="navbar navbar-default top-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>
</div>

bootstrap navbar向上打开

3 个答案: