0

首先感谢 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 不会让我发布图像。

4

1 回答 1

0

我相信排水沟是由 .row 添加的，您通常会在其中放置跨度。我之前在 .row 或 .row-fluid 中添加了负的左边距值，它似乎有效，我不确定编译是否明智，也许只是用单独的样式表覆盖。

.row {
    margin-left: -20px;
}
于 2013-06-19T14:56:26.193 回答