Bootstrap中如何让一个 DIV 成为一个可点击的区域?

Question

Bootstrap中如何让一个 DIV 成为一个可点击的区域?

正在做一个自适应的页面, 希望将一个DIV 做成整个可以点击的区域,以便在手机上也可以随意点击而无需精确点中 ICON.

当前的 DIV 做了一些样式,故如果简单的用包住这个 div,会导致样式的更改, 比如高度与宽度无法100%,或者是我写得不对

还请指点哈.

Answer 1

目前想到3种方法。其实也可以说是两种方法，一种方法。

• 在css中看到可点击，很容易想到 button 元素，button 中可以嵌套图片，文字，当然也可以是 div。不过需要重置一下 button 的浏览器样式。

//html:
<button type = "button" id = "btn">
    <div id = "clickable"></div>
</button>

//css:
#btn {
    margin: 0; padding: 0;
    barder: none; outline: none;
    cursor: pointer;
}
#clickable {
    ...
}

• a 元素也可以起到类似的作用，在 a 元素中嵌套一个 div，再用 href 指向要执行的操作。

<a href = "javascript:myFunc()">
    <div id = "clickable"></div>
</a>

• 第三种方法是最直接的，直接在js中获取可点击区域，定义操作。

//js:
document.getElementById("clickable") = function(){
    ...
};

按题主的条件，第三种方法最合适。

Answer 2

简单说下个人的想法吧 LZ可以试试看 如果你有更好的方法 希望能分享
将icon的标签设置成一个块级元素，然后让这个标签的宽高继承他父元素的宽高，比如：
div class="outer"
a class="icon"
div

.outer {
width: 50px;
height: 100px;
}
.outer .icon {
display: block;
width: inherit;
height: inherit;
}

Answer 3

1. 给div外层加个a标签.
2. 给div绑定点击事件.