添加链接时引导网格重叠

Question

不确定为什么向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>
        <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块。正如这把小提琴所示http://fiddle.jshell.net/6pyny04p/