html - 无法单击 Bootstrap 按钮的上半部分

Question

我在 bootstrap 中有一个基本的 btn-block btn-sm 按钮，它使用 position:sticky; top:10px 在我的 CSS 中。问题是，当光标位于按钮的上半部分时，该按钮不显示任何悬停效果，并且您无法单击它。另外，对于按钮下方的一点，你可以悬停在它上面，按钮显示悬停效果，当你点击它时，注册一个按钮 click 事件。看起来按钮的“可点击”部分偏移了大约 10 像素。

我的另一个按钮(发送按钮)似乎没有这个问题，所以它看起来与该按钮的 position sticky 样式有关。

似乎没有其他人问过类似的问题，所以我什至不知道如何开始尝试寻找解决方案。

我的一些代码:

#latest-msg {
    position: sticky;
    top: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card" id="chat-wrapper">
    <div class="card-header text-left" id="chat-title">
        Chat
    </div>
    <div class="card-body" id="chat-messages">
        <button type="button" class="btn btn-primary btn-block btn-sm" id="latest-msg">Latest Message</button>
        <!--^^^THIS BUTTON-->

        <p id="no-msg" class="text-muted">No Messages Yet. Be the first!</p>
        <!--Some text is appended here via javascript.-->
    </div>
    <div class="card-footer text-muted text-right hidden " id="footer-send">
        <label for="name">Name:</label>
        <input class="form-control" placeholder="Message..." id="name">

        <button class="btn btn-primary btn-block" id="name-enter">Send</button>
    </div>
    <div class="card-footer text-muted text-right" id="footer-name">
        <textarea class="form-control" placeholder="Message..." id="chat-msg-box"></textarea>

        <button class="btn btn-primary btn-block" id="msg-send">Send</button>
    </div>
</div>

Answer 1

将此添加到 javascript 文件表明按钮确实被点击了。

您也可以在这里查看:https://codepen.io/anon/pen/bazLvp

document.getElementById('latest-msg').addEventListener('click', buttonClicked);

function buttonClicked() {
  console.log('the button was clicked');
}