Question

我正在为我的CSS使用twitter bootstrap。

现在我刚刚在Navigator的右侧添加了“推文按钮” 它看起来很好，但我遇到了奇怪的问题。

当导航宽度足够宽时可以点击它但是当它很短时它不会让我点击几乎所有的链接。
为什么会这样？有什么办法可以解决这个问题吗？

我做了JS FIDDLE所以请检查一下。
请尝试缩小并展开导航的宽度，看看链接是否可点击谢谢！

可以使用此宽度点击

clickable

使用此宽度无法点击

enter image description here

HTML

          <body>
  <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
            <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>



            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav">
                    <li><a href="#A">A</a></li>             
                    <li><a href="#B">B</a></li>
                    <li><a href="#C">C</a></li>
                    <li><a href="#D">D</a></li>
                    <li><a href="#E">E</a></li>             
                </ul>
            </div>


            <div class="nav pull-right">

                　
                    <div class="btn-group"><a href="/user/a"><img alt="Avatar" src="no.png" style="width: 28px; height: 28px; border; border:1px solid rgb(255, 255, 255);margin-right: 2px;" /></a>
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        A<span id="message_received_count_navi"></span>
                        <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu pull-right">
                        <li><a href="/users/edit">EDIT</a></li>
                        <li><a href="/visitor">VISITOR</a></li>

                        <li><a href="/messages/received">
                            messages
                        </a></li>

                        <li class="divider"></li>
                        <li>
                            <a href="/logout">logout</a>       
                        </li>
                        </ul>
                    </div>

                    <!-- Button trigger modal -->
                    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    Tweet
                    </button>

            </div>      



</div>



    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title" id="myModalLabel">Tweet</h3>
          </div>
          <div class="modal-body">

                <form accept-charset="UTF-8" action="/users/A/comments" class="new_comment" enctype="multipart/form-data" id="new_comment" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="k4DbdSOK9IZy2hJ1xqH4SGuJDrHN92nNznuZAMC2B44=" /></div>
                    <textarea autocomplete="off" class="chat_box" cols="40" id="body_input" name="comment[body]" rows="20" style="width:98%;height:100px;">
</textarea>
                        <span class="btn btn-file"><input id="comment_comment_icon" name="comment[comment_icon]" type="file" /></span>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
            <button type="submit" class="btn btn-primary">Tweet</button>
</form>       </div>
        </div>
      </div>
    </div>

</div>
</div>

Answer 1

您的模型对话框窗口出现问题。请检查此代码。当sceen尺寸变小时，此对话框窗口重叠。如果你能做到最好：40％的对话问题得到解决。

的CSS：

.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: 40%;
}

× 鸣叫取消鸣叫

Answer 2

因为这个

<span class="window_label" style="opacity: 0.3;">Result</span>

已被绝对定位并且位于按钮顶部，因此鼠标点击无法通过。

您需要找到另一种方法将它放在一边。

当浏览器的宽度缩小时，为什么我无法点击链接？

2 个答案: