gpt4 book ai didi

html - 为什么浏览器变窄后无法点击链接?

转载 作者:太空宇宙 更新时间:2023-11-04 13:20:57 26 4
gpt4 key购买 nike

我正在为我的 CSS 使用 Twitter Bootstrap 。

现在我刚刚在 Navigator 的最右侧添加了“Tweet 按钮”。
看起来不错,但我遇到了奇怪的问题。

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

我做了 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>

最佳答案

您的模型对话框窗口有问题。请检查此代码。当屏幕尺寸变小时,此对话窗口会重叠。如果你能做到 top: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%;
}
× 鸣叫 取消 鸣叫

关于html - 为什么浏览器变窄后无法点击链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24085860/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com