使整个“col-*”成为一个链接

Question

使整个“col-*”成为一个链接

htmlcsstwitter-bootstraptwitter-bootstrap-3

3

这是我的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时，我的样式表就会非常混乱，对齐方式也会出现问题。（请参见第二个Code Pen）

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

这是最终想要呈现的效果。三个等距的列，宽度正确。

这是Codepen链接，当我更改HTML代码时遇到的问题。

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

帮忙？

- J. Robinson

您需要在问题本身提供一个 [mcve]，以演示问题。 - Quentin

我已经添加了两个CodePen，还需要什么？ - J. Robinson

请阅读[我的网站上的某些内容无法工作。我可以只粘贴链接吗？]（http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it）。如果问题依赖于外部资源才能得到理解，在外部资源消失或已经修复后，问题本身将变得毫无意义。请创建一个[MCVE]并将其放在**问题本身**中。 - Quentin

1

看，例子已经在那里了，要么帮忙解决，要么请停止在我的评论区垃圾留言。问题已经存在并且有足够的文档记录以便得到帮助。与其说我的帖子有什么问题，为什么不帮我解决问题呢？ - J. Robinson

4个回答

0

我还没有尝试过这个，但我相信一种方法是给你的链接添加一个类，比如：

<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任何你喜欢的属性。这可能不是最好的解决方案，但我相信它是一个解决方案。

- Belder

相信 Paige 提供的答案略好于我的。就像我的解决方案一样，您需要移动一些当前已经存在的 CSS 代码才能使其完全符合您的喜好：） - Belder

0

这可以很容易地通过jquery完成

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

将firstcol或col-sm-3应用于所有cursor: pointer;

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

- Antonio Dimitrovski

0

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

.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;
}

<!-- 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>

- Sensoray

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dr. Paul Kenneth Shreeman · Accepted Answer

你可以使用'onclick'代替与标签搞在一起，因为那会破坏bootstrap的列设置。

例如：<div class="col-sm-3" onclick="location.href='add.user.php';"> 请查看此Codepen。我无法测试您的链接，但如果这就是您要寻找的，请告诉我。

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