Question

首先感谢StackOverflow社区在我遇到人群之前，通过人群采购的奇迹来摧毁许多邪恶的错误。

我正在使用Wordpress Roots主题构建一个站点（基于HTMl5 Boilerplate和Bootstrap）。我正在使用一些Bootstrap并覆盖其他位，编写自定义CSS等等。

我的问题在于Bootstrap响应式导航栏。我正在创建一个包含流体网格部分的页面 - 因为所有部分都是在这个滚动类型设计中齐平，我想从Bootstrap网格中删除所有的水槽。为了达到这个目的，我将变量中的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>

Navbar 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不会让我发布图片。

Answer 1

我相信天沟是由.row添加到通常放置跨度的地方。我之前向.row或.row-fluid添加了负左边距值并且它似乎有效，我不确定编译是否明智，也许只是用一个单独的样式表覆盖。

.row {
    margin-left: -20px;
}

当将@gridGutterWidth（s）设置为0px以进行刷新网格时，Bootstrap导航栏a.brand会自行划分

1 个答案: