twitter-bootstrap – 如何使bootstrap3的导航栏输入大小填充剩

发布时间：2020-12-18 00:22:12 所属栏目：安全来源：网络整理

导读：我想在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

我想在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属性不能修复它…但不知道为什么.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!