html - Bootstrap : removes left and right margin from span

Question

我是 Twitter Bootstrap 的新手，我有一个问题，如果你知道去哪里找的话，我想这个问题很容易解决 ;o)

我已经包装了 3 <span4>在 <a> .这将删除 <span4> 之间的边距/间距这不是我想要的。我试图通过以下方式添加边距:

a > .span4 { margin: 0 1.7% };

但是，当您调整浏览器大小时，此解决方案无法完全按预期工作。有人对我如何解决这个问题有建议吗？

这是我的 HTML:

<div class="container-fluid">    
    <div class="row-fluid">
        <div class="span8 offset2">     
            <a href="#"><div class="span4">
                <h2>Box 1</h2>
                <p>Text here</p>
            </div></a>
            <a href="#"><div class="span4">
                <h2>Box 2</h2>
                <p>Text here</p>
            </div></a>
            <a href="#"><div class="span4">
                <h2>Box 3</h2>
                <p>Text here</p>
            </div></a>
        </div>
    </div>
</div>

它看起来像这样(只是添加了一个白色的背景色用于测试):

我想在 <span4> 之间有一个响应边距没有<a>的div包装。

我希望你能帮助我。谢谢。

亲切的问候- 杰斯珀

Answer 1

为了嵌套 span，您需要创建一个新的 row-fluid div。

编辑:您还需要您的链接在您的跨度 div 中(如果您将它们制作成display:block;，效果很好)

Here's some jsFiddle

<div class="container-fluid">    
    <div class="row-fluid">
        <div class="span8 offset2"> 
            <div class="row-fluid">    <!-- make sure to add this div-->
                <div class="span4">
                    <a href="#">
                        <h2>Box 1</h2>
                        <p>Text here</p>
                    </a>
                </div>
                ...
            </div>
        </div>
    </div>
</div>

<style type="text/css">
    a,a:link {
        display:block;
        background-color:#fff;
    }
</style>