我一直在寻找有关如何使用Thoughtbot的Neat网格框架在不同断点处重新排序/移动列位置的最佳解决方案?
我想在此标题中移动元素(在桌面分辨率中):
到此(移动分辨率):
我的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代码放在{{3 }}):
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);
}
}
}
}
我基本上想知道在Bourbon / Neat模仿Zurb&#39; s this gist的最佳/最优雅的方式。
非常感谢任何建议/帮助!
答案 0 :(得分:6)
内容优先顺序
如果您想在不改变HTML内容顺序的情况下切换特定视图中元素的显示顺序,Neat支持方便直观的负行定位。您可以像这样轻松地在每个列的父元素内移动每个列:
section {
@include outer-container;
aside {
@include span-columns(3);
@include shift(-12);
}
article {
@include span-columns(9);
@include shift(3);
}
}
现在,文章元素将位于左侧,而旁边则位于右侧。您可以像以前一样添加移动样式,以保持响应式显示的一致性:
$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/
答案 1 :(得分:0)
如果您发现难以检查换档位置,您可以随时选择检查元素并移动保证金百分比以获得理想的结果。
答案 2 :(得分:0)
drjorgepolanco的例子不起作用 我没有找到在Neat中移动cols的工作解决方案。 在Bootstrap Framework中,您可以通过.pull- *和.push- * classes轻松完成。
我对Neat的解决方案是
section {
@include outer-container;
position:relative
aside {
@include span-columns(3);
@include shift(9);
}
article {
@include span-columns(9);
position:absolute;
}
我理解这是一个黑客但它对我有用 }