“使搜索框不折叠在引导中的xs断点”

Question

我有一个输入元素和提交按钮的搜索框。我在自助学校工作。在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

默认情况下，引导内联表单总是折叠在xs上(从文档http://getbootstrap.com/css/#forms-inline)。

将. form -内联添加到窗体(不一定是a)中，用于左对齐和内联块控件。只适用于至少768 to宽的视图中的窗体.。

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

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

工作装置：https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview