我想在navbar-form中使用输入组,如下面的代码:
<form class="navbar-form navbar-left" role="search"> <div class="input-group"> <input class="form-control" placeholder="product" type="text"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Search</button> </span> </div> </form>
它在Firefox中固定大小约为200px.但是,在chrome或safari中,搜索需要一个全新的路线.我想知道bootstrap的css是否控制了输入的宽度.
input-group-btn得到两个css设置,display:table-cell;宽度:1%.这些是为了什么?
在文档中,默认搜索栏为:
<form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
它在firefox或chrome中运行良好,但我希望它能够占用导航栏的其余部分.喜欢facebook的搜索栏.
我是个人开发人员,我不擅长前端设计,有没有人知道这个特定的请求?
解决方法
我刚才有同样的问题.
我使用Safari,不幸的是,表单元素占用整行(100%的大小)(但是在Firefox上,它没有).
一个简单而容易的解决方法是将表格的宽度精确到100%以下.
<form class="navbar-form navbar-left" style="width:40%" role="search"> <div class="input-group"> <input class="form-control" placeholder="product" type="text"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Search</button> </span> </div> </form>
注意:width-40类而不是style属性不能修复它…但不知道为什么.