gpt4 book ai didi

twitter-bootstrap - 导航栏上的搜索表单 pull-left/pull-right 在 Chrome 中无法正常工作

转载 作者:行者123 更新时间:2023-12-04 07:44:53 30 4
gpt4 key购买 nike

我正在从 Twitter Bootstrap 版本 2.3.2 迁移到最新版本 3 RC 1。现在我在顶部导航栏中的搜索按钮遇到了一个问题。 HTML代码如下:

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<div class="nav-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Nav Item 1</a></li>
<li class="active"><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
<li><a href="#">Nav Item 4</a></li>
</ul>

<form class="navbar-form pull-right">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
</body>

问题是,它在 Firefox 中完美运行,但在 Chrome 或 IE 9 中,它使搜索框超长,因此将这个搜索框和按钮移动到导航栏下方。

我尝试了故障排除,发现如果我从表单中删除“向右拉”,搜索框和按钮将与导航项内联移动到上方,但失去了向右拉带来的效果 - 它会占用所有行空间正确的。

此外,如果我将搜索表单替换为调试

            <form class="navbar-form pull-right">
<div class="input-group">
<input type="text" placeholder="Search">
<button type="submit" class="btn btn-default">Search</button>
</div>
</form>

然后它就会很好地工作;但这也不是我的目的。

我的代码有问题吗?还是版本 3 RC 1 有问题?无论如何要解决它?

最佳答案

您可以添加 col-sm-4向您的 <form> 上课元素。

这应该根据屏幕宽度使它们保持正确的宽度。

使用列大小 (col-sm-**) 直到您得到它想要的方式。

See this jsFiddle demo

关于twitter-bootstrap - 导航栏上的搜索表单 pull-left/pull-right 在 Chrome 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18054508/

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