代码:(使用 bootstrap3 和 jQuery)
<body>
<div class="navbar navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<ul class="nav navbar-nav" style="margin-top: 0px; margin-bottom: 0px;">
<li><a href="#" class="icon_navbar" data-toggle="collapse" data-target=".navbar-collapse1" style="padding: 15px;"><i class="glyphicon glyphicon-menu-down icon_navbar_color"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="collapse navbar-collapse1" style="">
<form class="navbar-form">
<div class="input-group input-group-sm" style="max-width: 100%;">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
jsfiddle: https://jsfiddle.net/o2daoew5/
此代码执行打开 navbar 下的 collapsed div。
当浏览器的宽度小于 768px 时，输入栏足够宽。
但是浏览器的宽度大于或等于768px，它的输入栏变短了。
问题:
我想让这个输入栏的宽度完全响应浏览器的宽度。不会变短。我该如何解决？
最佳答案
使用类 form 而不是 navbar-form
<div class="collapse navbar-collapse1" style="">
<form class="form">
<div class="input-group input-group-sm" style="max-width: 100%;">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search icon_navbar_color"></i></button>
</div>
</div>
</form>
</div>
关于html - 当浏览器的宽度 >= 768px 时，折叠的输入栏更窄，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47729587/