BootStrap让两个控件在一行显示(label和input同行)

简介: BootStrap让两个控件在一行显示(label和input同行)

1 、添加class=“form-inline”

<div class="row">
            <div>
                <label class="form-inline" />参加单位:
                <input type="text" class="form-control" /></label>
            </div>
</div>

主要就是添加form-inline就可以了。

如果是一个文本框和一个按钮的话那么只需要在外侧用div包含,然后使用form-inline属性就可以了

<div class="form-inline row">
          <input type="text" class="form-control" placeholder="关键字" />
          <button class="btn btn-primary">搜 索</button>
     </div>

2、利用网格方式显示在一行

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="name" class="col-sm-1 control-label">名字</label>
        <div class="col-sm-11">
            <input type="text" class="form-control" style="width: 350px">
        </div>
    </div>
 </form>
相关文章
|
前端开发 JavaScript
Bootstrap File Input,最好用的文件上传组件(1)
Bootstrap File Input,最好用的文件上传组件
630 0
Bootstrap File Input,最好用的文件上传组件(1)
|
6月前
|
JavaScript 前端开发
Bootstrap-Switch开关控件使用指南
Bootstrap-Switch开关控件使用指南
【Flask】flask-bootstrap报错AttributeError: module ‘dominate.tags‘ has no attribute ‘input‘解决方法
【Flask】flask-bootstrap报错AttributeError: module ‘dominate.tags‘ has no attribute ‘input‘解决方法
|
移动开发 前端开发 HTML5
开心档 - 软件开发入门之 Bootstrap4 表单控件
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
|
前端开发 JavaScript
bootstrap input框回车后重新刷新页面问题
需求是给bootstrap页面form表单中的input搜索框绑定回车事件,输入完成回车自动搜索
bootstrap input框回车后重新刷新页面问题
|
前端开发 程序员 内存技术
Bootstrap File Input,最好用的文件上传组件(2)
Bootstrap File Input,最好用的文件上传组件
279 0
Bootstrap File Input,最好用的文件上传组件(2)
|
前端开发
Bootstrap教程(10)--使用输入组来组合控件
本文目录 1. 概述 2. 使用输入组 3. 调整输入组的大小 4. 小结
153 0
Bootstrap教程(10)--使用输入组来组合控件
|
移动开发 前端开发 HTML5
Bootstrap教程(9)--使用表单控件
本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结
201 0
Bootstrap教程(9)--使用表单控件
|
JSON 前端开发 JavaScript
文件上传控件bootstrap-fileinput与Python交互
文件上传控件bootstrap-fileinput与Python进行数据交互
|
前端开发