0

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

我有一个带有 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

4

2 回答 2

0

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

fieldset legend {
    padding-top:40px;
}

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

于 2013-06-18T00:52:53.820 回答
0

You could simply give the .nav-list a background color to prevent the text from getting cluttered.

.nav-list{background: #eee;}

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

Update to address the edited question

You could add a left margin to push the .nav-list toward the center:

.nav-list{margin: 0 200px;}
于 2013-06-18T00:49:13.537 回答