Question

我有点问题，我需要你的帮助来解决它。

我有一个带有span12和词缀的导航栏。滚动工作，但文本总是在导航栏下，当我点击一个项目时，我看不到我刚刚点击的标题，这就是我正在搜索的内容。我实际上有这个：

<div class="container" id="all">        
<div class="row">
<!-- Navbar
                ================================================== -->              

                    <div id="navbar" class="span12" data-spy="affix" data-offset-top="56">
                        <ul class="nav nav-list">
                            <li><a href="#menu1">Qui suis-je ? </a></li>
                            <li><a href="#menu2">Ce que je peux apporter </a></li>
                            <li><a href="#menu3">Mon expérience </a></li>
                            <li><a href="#menu4">Mon parcours scolaire </a></li>
                            <li><a href="#menu5">Contactez-moi ! </a></li>
                        </ul>
                    </div>  

                    <div class="span12 content">
                            <section id="menu0">
                                <h1>MOIIII</h1>
                                <p>.</p>
                            </section>
                    <section id="menu1">
                        <h1>Qui suis-je ? </h1>
                        <p>.</p>
                      </section>

                      <section id="menu2">
                        <h1>Ce que je peux apporter </h1>
                         <p></p>
                      </section>

                      <section id="menu3">
                        <h1>Mon expérience </h1>
                         <p></p>
                      </section>

                      <section id="menu4">
                        <h1>Mon parcours scolaire </h1>
                         <p></p>
                      </section>

                      <section id="menu5">
                        <h1>Contactez-moi ! </h1>
                         <p></p>
                      </section>                  
                </div>
            </div>
        </div>

和CSS

    body {
        background: #CCC;
    }


    #all {
        margin-top:55px;
        border: 1px solid #000;
        background: #EEE;
        -moz-box-shadow: 0 0 5px 5px #888;
        -webkit-box-shadow: 0 0 5px 5px#888;
        box-shadow: 0 0 5px 5px #888;
    }

    #navbar {
        height: 80px;
        -webkit-box-shadow: 0 0 2px 1px #333;
        -moz-box-shadow: 0 0 2px 1px #333;
        box-shadow: 0 0 2px 1px #333;
        top:0px;
    }

    .affix {
        position: fixed; 
        top:0px;
    }

    #navbar li {
        float: left;
        margin-right: 15px; 
        padding: 25px;
    }

    #navbar a {
        text-decoration: none;
        color: #000;
    }

    #navbar .active a {
        color: red;
    }

您可以在这里了解我的意思：http://jsfiddle.net/yPgUu/626/

谢谢，

Kai23

Answer 1

您可以简单地为.nav-list提供背景颜色，以防止文字混乱。

.nav-list{background: #eee;}

http://jsfiddle.net/yPgUu/631/

更新以解决已修改的问题

您可以添加左边距以将.nav-list推向中心：

.nav-list{margin: 0 200px;}

Answer 2

除了现有答案之外，请尝试在legends的顶部添加一些填充，以便将每个块推到导航下方：

fieldset legend {
    padding-top:40px;
}

http://jsfiddle.net/JHLVd/1/

避免文本在菜单下 - Twitter引导程序附加

2 个答案: