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/

添加链接时Bootstrap网格重叠

1 个答案: