Twitter Bootstrap 删除跨度的边距答案

【问题标题】：Twitter Bootstrap Remove Margin of the SpanTwitter Bootstrap 删除跨度的边距
【发布时间】：2012-05-18 21:08:07
【问题描述】：

我正在使用 Twitter Bootstrap。我已经连续使用了 span8 和 span 4。有没有办法从行的第一个跨度中删除前导 margin-left:20px 而无需手动覆盖它？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

通过使用“row”或“row-fluid”类作为跨度类的父类

<div class="row">
    <div class="span3">
        <ul>
           <li><a href="home.html">Home</a></li>
           <li><a href="dashboard.html">Dashboard</a></li>
           <li><a href="blog.html">Blog</a></li>
           <li><a href="idea_exchange.html">Idea Exchange</a></li>
        </ul>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以使用 !important 在您的 CSS 中添加一个类：

示例：

.no_margin{
margin:0px !important;
}

并在需要时将该类添加到您的 html 中。

（对不起我的英语不好xD）

【讨论】：

【解决方案3】：

在

的实用性也很小

http://getkickstrap.com/extras/#single-view

称为flushspan

【讨论】：

链接已失效。

【解决方案4】：

您在#mainContent 区域看到的 20px 边距是由于引导网格的设置，它使用 940px 的容器，它应该被带有 margin-left:-20px 的 .row 容器删除财产。在您的设置中，您的内容区域也按照设计的方式工作，但是您的顶部 pageHeader 和 mainNav 部分没有适当地插入到网格中，您只是在 .row 顶部部分没有插入 div包含在网格的适当容器中。

要解决此问题，您只需将所有pageHeader 和mainNav 元素插入.span12 容器中，所有内容都应相应堆叠。

固定标记

<header class="row" id="pageHeader">
    <div class="span12">
        <div id="logo">Logo</div>
        <div id="userDetails">userDetails</div>
    </div>
</header>

<nav id="mainNav" class="row">
    <div class="span12">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="dashboard.html">Dashboard</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="idea_exchange.html">Idea Exchange</a></li>
        </ul>
    </div>
</nav>

另外，快速提示，您可以将mainNav 背景颜色切换到.span12 的正确网格容器，只需像这样定位它：

nav#mainNav .span12 {
    background: url("../images/nav_bar_bg.png") repeat-x scroll 0 0 transparent;
    height: 45px;
    overflow: hidden;
}

【讨论】：