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'而不是搞乱标签，因为这会搞砸引导程序的col设置。

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

请查看此Codepen。我无法测试您的链接，但如果您正在寻找，请告诉我。

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

Answer 2

您可以将标签放在col-3中，并将所有其余内容放入其中。将a标记显示为块，然后将col-3上的填充代码移动到a标记。您也可以将背景和边框半径移动到标签上。 col-3应该是那个列。

＆＃13;

.row {
	display: flex;
	justify-content: center;
}
.col-sm-3 {
	text-align: center;

	margin: 0 2.5%;
}
.col-sm-3:hover {
	opacity: 0.9;
}
.col-sm-3 a {
	font-size: 1.5em;
	color: white;
  display:block;
  padding: 2.5% 25px;
  background: #303030;	
	border-radius: 25px;
}
.col-sm-3 a:hover {
	text-decoration: none;
	color: #00bc8c;
}
.img-sm {
	width: 100px;
  height: 100px;
}

＆＃13;

<!-- 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"><a href="adduser.php">
					<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-add.png'; ?>">
          <p>User Add</p></a>
				</div>

				<div class="col-sm-3"><a href="edituser.php">
					<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-edit.png'; ?>">
					<p>User Edit</p></a>
				</div>

				<div class="col-sm-3"><a href="deleteuser.php">
					<img class="img-sm" src="<?php echo Config::get('links/app_root') . 'assets/imgs/icons/user-delete.png'; ?>">
					<p>User Delete</p></a>
				</div>
			</div>
		</div>

＆＃13;

Answer 3

我没有试过这个，但我很确定一种方法是给你的链接一个类：

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

然后像：

.link {
  height: 100%;
  width: 100%
}

当然，你可以给.link你想要的任何属性。可能不是最好的解决方案，但我认为这是一个解决方案。

Answer 4

这可以通过jquery轻松完成

为每个div提供col-sm-3以外的类名

为所有cursor: pointer;

制作firstcol或col-sm-3

    $(".firstcol").click(function(){
        window.location = "URL";
    });

使整个“col- *”成为一个环节

4 个答案: