首先感谢 StackOverflow 社区在我遇到它们之前通过众包的奇迹消灭了许多邪恶的错误。
我正在使用 Wordpress Roots 主题(基于 HTMl5 Boilerplate 和 Bootstrap)构建一个站点。我正在使用一些 Bootstrap 并覆盖其他位,大量编写自定义 CSS 等。
我的问题是 Bootstrap 响应式导航栏。我正在创建一个包含流体网格部分的页面 - 由于所有部分在这种滚动式设计中都是齐平的,我想从 Bootstrap 网格中删除所有排水沟。为了实现这一点,我在 variables.less 中将 GutterWidths 设置为 0px,如下所示,然后使用 simpLESS 进行编译:
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 0px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 0px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
// 768px-979px
@gridColumnWidth768: 42px;
@gridGutterWidth768: 0px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));// Default 940px grid
人们希望调整网格系统与导航栏无关,但徽标(a.brand)在链接上方突破了自己的行,请参阅:http ://twvid.co/mega/case-studies
看起来在 LESS 的泥潭中的某个地方,这些排水沟值被用作变量来确定我在 FF Web 开发工具中努力追踪的一些导航栏布局内容。
WP端没什么特别的,这里是导航栏:
<header class="banner navbar navbar-static-top navbar-inverse" role="banner">
<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>
<a class="brand" href="http://www.tanglewoodproductions.co.uk/mega/">
Tanglewood Video </a>
<nav class="nav-main nav-collapse collapse" role="navigation">
<ul id="menu-primary-navigation" class="nav"><li class="menu-home"><a href="/mega/">Home</a></li>
<li class="menu-video-marketing"><a href="/mega/video-marketing/">video marketing</a></li>
<li class="menu-video-production"><a href="/mega/video-production/">video production</a></li>
<li class="active menu-case-studies"><a href="/mega/case-studies/">case studies</a></li>
<li class="menu-contact-us"><a href="/mega/work-with-us/">contact us</a></li>
<li class="menu-blog"><a href="/mega/blog/">blog</a></li>
</ul> </nav>
</div>
</div>
</header>
导航栏 CSS:
.banner { }
.navbar .nav {
font-size: 18px;
}
a.brand {
line-height: 20px;
}
.page-header h1{
text-transform: uppercase;
}
网格部分:
<section class="container-fluid scroll-section" id="case-studies-portfolio">
<h1 class="text-center section-heading">case studies</h1>
<h2 class="text-center section-slug">stuff we've done</h2>
<div class="row-fluid" id="portfolio-grid">
<div class="span8 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span2 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span2 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
<div class="row-fluid" id="portfolio-grid">
<div class="span4 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span4 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="span4 portfolio-cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</section>
网格CSS:
#case-studies-portfolio {
position: relative;
z-index: 4;
}
#portfolio-grid {
border-color: rgb(0,0,0);
border-width: 1px;
border-style: dotted;
}
/* #portfolio-grid [class*="span"] {
margin-left: 0;
} */
.portfolio-cell {
color: #fff;
background-color: rgba(30,30,30,1);
height: 100%;
}
旁白:无论内容如何,我都试图让网格单元格全高。
当然,只是在我的 CSS 中覆盖它也可以工作(不确定如何),但由于我只在一个页面上使用网格,如果我使用更多网格,我不希望在其他地方使用所有这些填充,我以为我会将问题扼杀在萌芽状态以减少代码冗余。
我希望任何建议对于希望简单地将 Bootstrap 网格用于刷新网格布局(在需要时添加填充)而不破坏其导航栏的任何人都可能有用。
提前谢谢了。
注意:这是一个实时开发站点,所以我的问题实际上可能不会出现在链接页面上,因为我对其进行处理 - StackOverflow 不会让我发布图像。