首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap表单内联不工作

Bootstrap表单内联不工作
EN

Stack Overflow用户
提问于 2014-01-09 18:25:46
回答 3查看 27.4K关注 0票数 13

我试图添加这个简单的搜索表单,同时应用表单内联类,以便控件显示在彼此的旁边,但我得到的控件显示在彼此的上方,搜索底部显示为白色,看起来很奇怪,所以有人能告诉我这里缺少什么吗?

代码语言:javascript
复制
<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>
EN

回答 3

Stack Overflow用户

发布于 2021-10-17 10:08:20

我在form-inline上也遇到过类似的问题。对我来说,form-inline中的input-group致力于将输入和按钮保持在一行相邻的位置,而不是一个叠加在另一个之上。

代码语言:javascript
复制
<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>
票数 2
EN

Stack Overflow用户

发布于 2015-04-08 19:22:56

我使用bootstrap中的代码片段也遇到了类似的问题。我发现两个类'control-group‘和’control‘破坏了内联。移除这两个类为我解决了这个问题。

代码语言:javascript
复制
<div class="control-group">
            <label class="control-label" for="Name">Name</label>
            <div class="controls">
                <input type="text" id="Name" placeholder="Name">
            </div>
        </div>

至:

代码语言:javascript
复制
            <label class="control-label" for="Name">Name</label>

                <input type="text" id="Name" placeholder="Name">
票数 1
EN

Stack Overflow用户

发布于 2019-07-16 02:48:37

是!从div中删除第二个类对我来说很有效。

代码语言:javascript
复制
<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>  

代码语言:javascript
复制
<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>  

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21017542

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档