我无法将桌面版导航栏中的输入字段设置为 100% 流畅宽度。
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/100x30.png?text=Logo" width="100" height="25" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav navbar-nav">
<div class="navbar-form">
<div class="input-group">
<input type="url" class="form-control" placeholder="http://www.website.com" name="url" value="" />
<span class="input-group-btn">
<button class="btn btn-success" type="button" id="seo-submit">Submit</button>
</span>
</div>
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</div>
</div>
</nav>
在这里也创建了一个 Codeply 链接:https://www.codeply.com/go/IsKEVDDCkG
在保持内联的同时让输入字段和按钮填满导航栏空间有什么想法吗?
最佳答案
您需要对您的 css 和 HTML 进行一些更改。
在 HTML 中,我将类 navbar-left
添加到菜单 div。
现在在 css 上我们可以使用一些 flexbox 属性来让一切变得更流畅。
我用放置媒体查询对此进行了编码,您需要添加它们以便您的移动布局保持不变。
在整页测试此代码段
div#navbar {
display: flex!important;
}
.navbar-left{
flex-grow: 1;
}
.navbar-nav {
float: none!important;
}
.navbar-form .input-group,
.navbar-inverse .navbar-form,
.input-group-btn:last-child>.btn{
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/100x30.png?text=Logo" width="100" height="25" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav navbar-nav navbar-left">
<div class="navbar-form">
<div class="input-group">
<input type="url" class="form-control" placeholder="http://www.website.com" name="url" value="" />
<span class="input-group-btn">
<button class="btn btn-success" type="button" id="seo-submit">Submit</button>
</span>
</div>
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</div>
</div>
</nav>
希望这有帮助:)
关于css - 流体宽度导航栏表单输入组 - Bootstrap 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53109628/