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>

Answer 1

来自Bootstrap参考， for inline forms :

这仅适用于视口中至少为768px的表单宽。

就你的布局而言，

<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>

非常好......内联：

working demo

Answer 2

我在bootstrap的代码片段中遇到了类似的问题。我发现了2个班级＆＃39; control-group＆＃39;和＆＃39;控制＆＃39;打破了内联。删除2个类为我修复了它。

<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">

Answer 3

是的！从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>

Bootstrap表单内联不起作用

3 个答案: