html - 添加链接时 Bootstrap 网格重叠

Question

不确定为什么将链接添加到 h3 标签会与 Bootstrap 网格系统重叠。其他链接似乎工作正常，但添加链接会在代码中造成这种差异。

        <div class="row">
    <div class="col-md-4">
        <a href="826DC.html" ><img src="work/SCCthumb.jpg"></a>
        <h3 class="smltitle">826DC</h3>
        <h1 class="smlhead">Print</h1>
    </div>

    <div class="col-md-4">
        <a  href="AsiaOutdoors.html" ><img src="work/Asiaoutdoorsthumb.jpg"></a>
        <h3 class="smltitle">Asia Outdoors</h3>
        <h1 class="smlhead">Print</h1>
    </div>
    <div class="col-md-4">
        <a href="AHA.html" ><img src="work/AHAthumb.jpg"></a>
        <h3 class="smltitle">American Heart Association; Heart's Delight</h3>
        <h1 class="smlhead">Print</h1>
    </div>

</div>

<div class="row">

    <div class="col-md-4">
        <a href="CafeGelatoh.html" ><img src="work/CafeGelatohthumb.jpg"></a>
        <h3 class="smltitle"><a href="CafeGelatoh.html">Cafe Gelatohhh!!!</a></h3>
        <h1 class="smlhead">Branding, Print</h1>
    </div>

    <div class="col-md-4">
        <a href="Cardinvite.html" ><img src="work/cardsthumb.jpg"></a>
        <h3 class="smltitle"><a href="Cardinvite.html">Cards, Invitations Etc</a></h3>
    </div>

</div>

如果我可以张贴图片，我就可以给你看。基本上，带有 h3 标签内链接的代码图像(底部的)重叠。有什么建议吗？

Answer 1

是的，将 a 标签放在 H3 之外

<div class="row">
<div class="col-md-4">
    <a href="826DC.html" ><img src="work/SCCthumb.jpg"></a>
    <h3 class="smltitle">826DC</h3>
    <h1 class="smlhead">Print</h1>
</div>

<div class="col-md-4">
    <a  href="AsiaOutdoors.html" ><img src="work/Asiaoutdoorsthumb.jpg"></a>
    <h3 class="smltitle">Asia Outdoors</h3>
    <h1 class="smlhead">Print</h1>
</div>
<div class="col-md-4">
    <a href="AHA.html" ><img src="work/AHAthumb.jpg"></a>
    <h3 class="smltitle">American Heart Association; Heart's Delight</h3>
    <h1 class="smlhead">Print</h1>
</div>

</div>

<div class="row">

<div class="col-md-4">
    <a href="CafeGelatoh.html" ><img src="work/CafeGelatohthumb.jpg"></a>
    <a href="CafeGelatoh.html"><h3 class="smltitle">Cafe Gelatohhh!!!</h3></a>
    <h1 class="smlhead">Branding, Print</h1>
</div>

<div class="col-md-4">
    <a href="Cardinvite.html" ><img src="work/cardsthumb.jpg"></a>
    <a href="Cardinvite.html"><h3 class="smltitle">Cards, Invitations Etc</h3></a>
</div>

</div>

希望这能帮助您解决问题!

ps，您也可以添加另一个 col-md-4 来完成 12 block 。正如这个 fiddle 所说明的 http://fiddle.jshell.net/6pyny04p/