Bootstrap表单内联未生效。

Question

我想在应用表单内联类的同时添加这个简单的搜索表单，以便控件出现在一起，但我得到的控件是相互堆叠的，并且搜索按钮显示为白色，看起来很奇怪。请问有人能告诉我这里缺少什么吗？

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

- MChan

---

使用哪个版本的Bootstrap，2还是3？ - Kevin Bowersox

它是3..，你可以看到类名为“col-md-8”。 - Ram kumar

Bootstrap最新版（昨天刚下载的），我相信是3版。 - MChan

Answer 1

来自Bootstrap参考资料，对于内联表单:

这仅适用于视口宽度至少为768像素的表单。

就布局而言，

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

没问题，内联：

演示链接

- NoobEditor

---

这非常奇怪，难道是浏览器问题？！但我在Chrome、Firefox以及Windows和Linux机器上都测试过，并且得到了相同的结果:(你认为可能会导致这种奇怪行为的任何可能原因吗？ - MChan

@MChan：请在您所有的浏览器中检查这个示例，然后如果问题仍然存在，请在此处发表评论。我不认为这是浏览器问题，因为Bootstrap是跨浏览器的！ - NoobEditor

Answer 2

我遇到了类似的问题，使用form-inline时，加上input-group可以让输入框和按钮在同一行显示，而不是一个在另一个下面。

<form class="form-inline">
  <div class="input-group">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </div>
</form>

- Nafeez Quraishi

---

这对我也起作用了。 - massigarg

这个方法是有效的，但我觉得这不应该是必需的。已经过去了2年，我使用的是Bootstrap 5.3.2，但这个问题仍然存在。form-inline应该是inline的。 - undefined

Answer 3

我曾经遇到过与bootstrap代码片段类似的问题。我发现'control-group'和'controls'这两个类破坏了内联。删除这两个类对我很有帮助。

<div class="control-group">
            <label class="control-label" for="Name">Name</label>
            <div class="controls">
                <input type="text" id="Name" placeholder="Name">
            </div>
        </div>

到：

            <label class="control-label" for="Name">Name</label>

                <input type="text" id="Name" placeholder="Name">

- learnerplates

---

但是当您删除from-control类时，您将失去输入控件的样式。您有什么解决方案？ - Karr

Answer 4

是的！将第二个类从 div 中删除对我有用。

<form class="form-inline name=" search">
<fieldset>
    <div class="form-group">
        <input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
        <input class="btn btn-lg btn-primary" type="submit" value="  Programe Tag  " />
    </div>
</fieldset>  

到

<form class="form-inline name=" search">
<fieldset>
    <input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
    <input class="btn btn-lg btn-primary" type="submit" value="  Programe Tag  " />
</fieldset>  

- Geoff White