html - 使整个 "col-*"成为一个链接

Question

这是我的 HTML:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
                    <p><a href="adduser.php">User Add</a></p>
                </div>

                <div class="col-sm-3">
                    <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>">
                    <p><a href="edituser.php">User Edit</a></p>
                </div>

                <div class="col-sm-3">
                    <img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>">
                    <p><a href="deleteuser.php">User Delete</a></p>
                </div>
            </div>
        </div> 

我希望将 HTML 制作成这样:

<a href="#">
<div class="col-sm-3">
....
</div>
</a>

当整个列是一个链接并且悬停在它上面时会改变不透明度并且能够重定向到另一个页面。但是，当我更改我的 HTML 时，我的样式表变得非常困惑，并且对齐变得一团糟。 (见第二支代码笔)

https://codepen.io/JDSWebService/pen/BZpoaq

这就是我希望一切都完成后的样子。具有正确宽度的三个均匀间隔的列。

这是我在更改 HTML 代码时遇到的问题的 Codepen

https://codepen.io/JDSWebService/pen/bRgVVz

帮忙吗？

Answer 1

您可以添加“onclick”而不是乱用标签，因为这会搞砸 Bootstrap 的 col 设置。

例如，<div class="col-sm-3" onclick="location.href='add.user.php';">

请查看此 Codepen。我无法测试您的链接，但请告诉我这是否是您要查找的内容。

https://codepen.io/pkshreeman/pen/awpvGy