定位固定头引导程序

时间:2013-07-12 10:29:00

标签: html html5 css3 twitter-bootstrap boilerplate

我正在使用HTML5样板和Bootstrap来创建一个网站。

我希望将橙色和灰色横幅固定在滚动上,但也会居中并响应。目前它固定在滚动和响应但不是中心。

我如何制作这个元素: - 固定在滚动上 - 响应 - 中心

请记住,我仍然希望滑块按原样显示在横幅后面。

这是我的代码:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right" id="nav-links">
                        <li class="active"><a href="#">HOME</a></li>
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#contact">CONTACT</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
                <div class="span12"> <!--THIS IS THE IMAGE I AM USING-->
                    <img src="images/PBP_header.png"/>
                </div>
    </div>

我的开发网站是:http://dev.paperboyposse.com

先谢谢你们!

1 个答案:

答案 0 :(得分:0)

只需替换

<div class="span12">
                    <img src="images/PBP_header.png">
</div>

<div class="container">
   <div class="span12">
          <img src="images/PBP_header.png">
   </div>
</div>

它现在应该是固定的,响应性的和集中的:)

注意:我不认为滑块是标题btw的一部分。