0

我有一个 html 文件和 css，如下所示。我想创建一个像这个页面http://www.elated.com/res/File/articles/authoring/responsive-web-design-demystified/responsive-480-meta.html这样的响应式网页

但是，导航栏当前位于页面底部，而它应该位于顶部。当导航栏显示在小屏幕上时，如何修改 css 以便将导航栏置于顶部。

正确的就是我想要创造的 标题 

    <div class="container">
        <div class="row">
            <div class="header">
                <h2>Header</h2>
            </div>
        </div>
        <div class="row page-content">

            <div id="content" class="span7">                
                <h1>Responsive Layout</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Curabitur et leo dui, eu semper tellus. Vivamus aliquam, mi ultrices fringilla varius, augue nisl tincidunt elit, eu tincidunt ante metus ac mauris. Praesent congue blandit nunc, eu facilisis ligula faucibus sit amet. Proin eget turpis nulla. Phasellus mattis nisi a ante aliquet posuere. Vestibulum tortor quam, luctus imperdiet venenatis nec, molestie eu massa. Vivamus nec ipsum viverra augue aliquet bibendum. Morbi ac felis purus, sed vehicula mauris. Integer tempor mollis libero id hendrerit. Fusce sit amet urna quis justo varius pulvinar dapibus sed metus.</p>
                <p>Ut vel mauris eu velit fringilla lobortis. Phasellus accumsan sem in nisl luctus gravida. Vestibulum vitae scelerisque eros. Nullam id leo erat, et congue elit. Nunc volutpat justo tempor magna pretium adipiscing. Vivamus eget massa odio. Suspendisse potenti. Aliquam erat volutpat. Proin faucibus leo vel sem lobortis sed hendrerit diam suscipit. Maecenas dignissim, neque sit amet tristique pulvinar, ipsum orci porttitor odio, ac auctor nunc mauris ac nisi. Sed vitae dui et urna mollis elementum et id purus. Suspendisse bibendum quam id lacus condimentum ut pharetra orci mollis. Curabitur et consequat nisi. Suspendisse dictum luctus neque, id tincidunt justo rutrum non. Aenean fringilla quam ac magna ornare vehicula.</p>
            </div>
            <div id="sidebar" class="span2">
                <h2>Sidebar</h2>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Morbi ac felis purus, sed vehicula mauris.</p>
                <h2>Contact Us</h2>
                <p>Morbi ac felis purus, sed vehicula mauris.</p>
            </div>
             <div id="nav" class="span2">
                 <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Friends</a></li>
                  </ul>
            </div>
        </div>
    </div>
    </body>
</html>

身体{

}

.header
{
    background: #ff6600;
    padding:20px;
}

.page-content{
    margin-top:20px;
}
#nav ul {
    background: none repeat scroll 0 0 #A7DBD8;
    color: #333333;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 20px;
}

#content
{
    background: none repeat scroll 0 0 #E0E4CC;
    color: #333333;
    margin-left:0px;
    padding:20px;
}

#sidebar
{
    background: none repeat scroll 0 0 #69D2E7;
    color: #FFFFFF;
    padding:20px;
}
4

1 回答 1

1

我没有对这个问题投反对票，这对我来说似乎是一个合理的问题，而且在 Bootstrap 中实际上很容易解决。

看看这个：http: //jsfiddle.net/panchroma/MzaTV/

重要的是我在主要内容 div 之前添加了 nav div 并添加了 float right。基本上就是这样。

我以前用过这个，我真正喜欢的是，它是改变 div 顺序问题的一个干净的解决方案，因为在 viewports < 768px 处，Bootstrap 网格折叠成单列并且浮动右侧基本上没有效果，因此导航 div 会显示在主要内容之前（在这种情况下）

CSS 

#nav.span2{
float:right;
}

HTML

<div class="container">
<div class="row">
        <div class="header">
       ...
        </div>
    </div>
<div class="row page-content">

        <div id="nav" class="span2">
             ...
        </div>


        <div id="content" class="span7">                
            ...
        </div>

        <div id="sidebar" class="span2">
            ...
        </div>

   </div>
</div>
于 2013-06-05T21:52:48.923 回答