25

我正在使用 Twitter 引导程序。我已经连续使用了 span8 和 span 4。无论如何从行的第一个跨度中删除前导 margin-left:20px 而不需要手动覆盖它？

4

4 回答 4

30

您在您的#mainContent区域看到的 20px 边距是由于引导网格的设置，它使用 的容器940px，它应该被.row具有margin-left:-20px属性的容器删除。在您的设置中，您的内容区域也按照设计的方式工作，但是您的顶部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;
}
于 2012-05-10T10:49:17.480 回答
8

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

例子：

.no_margin{
margin:0px !important;
}

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

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

于 2013-08-29T01:11:45.237 回答
2

也有较小的效用

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

称为flushspan

于 2013-06-20T13:24:39.980 回答
0

通过使用“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>
于 2015-11-19T15:56:39.060 回答