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）

将.form-inline添加到您的表单（不一定是a）左对齐和内联块控件。 这仅适用于表单在至少768像素宽的视口中。

你需要覆盖它们，以免永远崩溃

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

工作插件：https://plnkr.co/edit/KFvIrUSwioIwWG6hZAA1?p=preview

Make Search Box不会在bootstrap

1 个答案: