Bootstrap表单内联不起作用

我试图在应用表单内联类时添加这个简单的搜索表单，以便控件显示为彼此相邻，但是我获得的控件显示在对方上方，并且搜索底部显示为白色，看起来很奇怪，所以有人可以告诉我我在这里失踪了什么？Bootstrap表单内联不起作用

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

来源

2014-01-09 MChan

什么版本的引导2或3的？ –

其3 ..你可以看到像“col-md-8”这样的课程名称。 – Kumar

bootstrap latest（昨天刚刚下载）所以我相信3 – MChan

从自举参考，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>

其完美fine..inline：

working demo

来源

2014-01-09 10:51:21 NoobEditor

这很奇怪，可能是浏览器问题？！但是我在Chrome和Firefox上测试了它，在Windows和Linux机器上也得到了相同的结果:(你认为可能导致这种奇怪行为的任何可能的原因？ – MChan

@MChan：请检查你拥有的所有浏览器中的小提琴，然后评论回到这里，如果问题仍然存在..我不认为它的浏览器问题，因为BS是跨浏览器！ – NoobEditor

我曾与从引导代码段类似的问题。我发现2班'控制组'和'控制'打破了内联。删除了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">

来源

2015-04-08 11:22:55 learnerplates

Bootstrap表单内联不起作用

回答

相关问题