html - bootstrap :<a>从跨度中删除左右边距

我是Twitter Bootstrap的新手，我有一个问题，如果您知道从哪里看，我会认为它很容易克服； o）

我在<span4>中包裹了3个<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> div之间有一个响应裕度，就像没有<a>包装时一样。

希望您能对我有所帮助。谢谢。

亲切的问候
-杰斯珀

最佳答案

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

编辑：您还希望链接在span 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>

关于html - bootstrap :<a>从跨度中删除左右边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16733235/