css - 使搜索框不会在 Bootstrap 中的 xs 断点处折叠

Question

我有一个带有输入元素和提交按钮的搜索框。我在 Bootstrap 中工作。在 xs 断点提交按钮进入另一行。我想让整个论坛永远不会崩溃，而是在默认情况下改变它的大小

<form class="form-inline quick-search-form" role="form" action="search.php">
<div class="form-group">
    <input type="text" class="form-control" placeholder="Enter Keyword(s)">
    <button type="submit" id="quick-search" class="btn btn-custom"><span class="glyphicon glyphicon-search custom-glyph-color"></span></button>
</div>
<div class="pad-top-20">Examples Background, Banner, Brochure</div>

Answer 1

默认情况下，bootstrap 内联表单将始终在 xs 上折叠(来自文档 http://getbootstrap.com/css/#forms-inline)

Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

你需要覆盖它们，这样它就永远不会崩溃

.form-group input{
  width: 80%;
  display: inline-block;
} 

工作代码:https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview