我正在寻找有关如何使用 Thoughtbot 的 Neat 网格框架在不同断点处重新排序/移动列位置的最佳解决方案?
I would like to shift elements in my header from this ( in desktop resolution):
对此(以移动分辨率):
我的 HTML 看起来像这样:
<header>
<section id='header_elements'>
<p id="chocolat_logo"><strong><a href="#"><img alt="Chocolat Restaurant Logo" itemprop="logo" src="/assets/main_logo.png" /></a></strong></p>
<nav>
<ul>
<li id='home_link'>
Home
</li>
<li id='menus_link'>
<a href="/menus/evening" itemprop="menu">Menus</a>
</li>
<li id='drinks_link'>
<a href="/menus/wine-list" itemprop="menu">Drinks</a>
</li>
<li id='contact_link'>
<a href="#">Contact Us</a>
</li>
</ul>
</nav>
<ul id='top_contact_details'>
<li class='social_link' id='twitter_link'>
<a href='twitter'>
Twitter
</a>
</li>
<li class='social_link' id='facebook_link'>
<a href='facebook'>
Facebook
</a>
</li>
<li id='top_phone''>
<span>
(061)
</span>
412 888
</li>
</ul>
</section>
</header>
SCSS 看起来像这样(为了清楚起见,我删除了与实际布局无关的任何内容,如果相关的话,我将该标头的完整 SCSS 代码放在这个要点 https://gist.github.com/concordiadiscors/b98638fe66f1c32ea618):
header{
@include outer-container;
#header_elements{
width: 100%;
height: 100%;
// LOGO
#chocolat_logo{
float: left;
@include span-columns(3);
@include media($mobile) {
float: left;
@include span-columns(6);
}
}
// Main Navigation
nav{
@include media(min-width 480px){
@include span-columns(6);
}
@include media($mobile) {
@include fill-parent();
}
}
//Contact Details
#top_contact_details{
@include span-columns(3);
@include media($mobile) {
@include span-columns(6);
}
}
}
}
我基本上想知道模仿 Zurb 的最好/最优雅的方式是什么Foundation 的推/拉重新排序功能 http://foundation.zurb.com/docs/components/grid.html#source-ordering在波本/尼特。
非常感谢您的任何建议/帮助!
内容优先顺序
如果您想切换特定视图中元素的显示顺序而不更改 HTML 中内容的顺序,Neat 支持方便直观的负行定位。您可以像这样轻松地在其父元素内移动每一列:
section {
@include outer-container;
aside {
@include span-columns(3);
@include shift(-12);
}
article {
@include span-columns(9);
@include shift(3);
}
}
现在,article 元素将位于左侧,aside 元素将位于右侧。您可以像之前一样添加移动样式,以保持响应式显示的一致性:
$mobile: new-breakpoint(max-width 500px 4);
section {
@include outer-container;
aside {
@include span-columns(3);
@include shift(-12);
@include media($mobile) {
@include span-columns(4);
}
}
article {
@include span-columns(9);
@include shift(3);
@include media($mobile) {
@include span-columns(4);
}
}
}
请参阅此处的完整文章:http://www.sitepoint.com/sass-bourbon-neat-lightweight-semantic-grids/ http://www.sitepoint.com/sass-bourbon-neat-lightweight-semantic-grids/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)