Question

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

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

The right one is what I want to create 标题

    <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;
}

Answer 1

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

检查出来：http://jsfiddle.net/panchroma/MzaTV/

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

之前我已经使用过这个，我真正喜欢的是它是一个如此干净的解决方案来改变div的顺序，因为在viewports＆lt; 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>

Twitter引导响应元素顺序

1 个答案: