IMG链接使整个Bootstrap Div可单击

Question

我正在尝试用图像制作div。此图像围绕它具有<a>标签。

现在，它只能使图像可单击，而是使整个Div可单击，并且图像旁边的H4将其推向DIV下方。<a>的宽度为整个Div。

我正在使用Div类中的bootstrap col。

我该如何解决？我尝试给<a>一个宽度，但这不起作用...

预先感谢！

<header>
    <div class="image col-sm-8">
        <a href="home.php"><img class="img-responsive" src="Images/pc4u.png" style="height: 100px; width: 175px;"></a>
        <h4>PC4U voor al uw computers, onderdelen en software!</h4>
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

Answer 1

<H>标签默认情况下，如果要显示img和h4并排显示100％宽度，则使用disply:inline-block，如下所示：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
    <div class="col-sm-8">
        <a href="home.php"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/3/30/Java_programming_language_logo.svg" style="height: 100px; width: 175px;display:inline-block"></a>
        <h4 style="display:inline-block">PC4U voor al uw computers, onderdelen en software!</h4>
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

Answer 2

使用 width：100％; 您的图像

.image{
background:red;
}
img{
 width: 100%;
}

<header>
    <div class="image col-sm-8">
        <a href="home.php"><img class="img-responsive" src="https://www.w3schools.com/css/img_fjords.jpg" style=""></a>
        <h4>PC4U voor al uw computers, onderdelen en software!</h4>
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

Answer 3

您可以这样做。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
    <div class="image col-sm-8">
        <div class="col-sm-4">
         <a href="home.php"><img class="img-responsive" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" style="height: 100px; width: 175px;"></a>
        </div>
        <div class="col-sm-6">
         <h4>PC4U voor al uw computers, onderdelen en software!</h4>
        </div>
       
    </div>
    <div class="userInformationAndShoppingCart col-sm-4">
        <h4>Middle</h4>
    </div>
</header>

Answer 4

使用style =" display：inline"内部＆lt; a＆gt;标签，在Bootstrap-4中工作

<div class="col-sm-8">
        <a style="display:inline-block;" href="home.php"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/3/30/Java_programming_language_logo.svg"></a>
        <h4>PC4U voor al uw computers, onderdelen en software!</h4>
    </div>