html - 避免文本进入菜单 - Twitter Bootstrap 词缀

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/

谢谢，

开23

Answer 1

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

fieldset legend {
    padding-top:40px;
}

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