Bootstrap：<a> removes left and right margin from span</a>

Question

我对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>包装一样。

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

亲切的问候 - Jesper

Answer 1

为了嵌套跨度，您需要创建一个新的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>

Answer 2

a标记的默认显示为：inline;

您只是尝试为该标签添加display：block

a{display:block}

然后你试试这个

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

Answer 3

我建议只使用a作为网格，而不是它包含的div。例如：

<a href="#" class="span4">
  <div>
    <h2>Box 1</h2>
    <p>Text here</p>
  </div>
 </a>

此时，您可以选择完全摆脱包含div。

为什么这样？好吧，它为您提供了所需的宽度，填充和边距，而无需编写更多代码。并且它与使用div作为网格片的语义相同。

Bootstrap网格系统非常完整，而Ponraj的解决方案是编写更多代码来执行已经存在的操作。如果您尝试向其添加更多功能，则应该只扩展网格系统。