通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>

—–下面有个“顶”字,你懂得O(∩_∩)O哈哈~

—–乐于分享,共同进步!

—–更多文章请看:http://blog.csdn.net/duruiqi_fx


Bootstrap3 表单-水平排列的表单的更多相关文章

  1. Bootstrap中水平排列的表单form-inline

    <html> <head> <title>初识Bootstrap</title> <meta charset="utf-8"& ...

  2. Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

    一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  3. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  4. bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 线性表->链式存储->线形链表(单链表)

    文字描述: 为了表示前后两个数据元素的逻辑关系,对于每个数据元素,除了存储其本身的信息之外(数据域),还需存储一个指示其直接后继的信息(即直接后继的存储位置,指针域). 示意图: 算法分析: 在单链表 ...

  6. sqlalchemy模块介绍、单表操作、一对多表操作、多对多表操作、flask集成.

    今日内容概要 sqlalchemy介绍和快速使用 单表操作增删查改 一对多 多对多 flask集成 内容详细 1.sqlalchemy介绍和快速使用 # SQLAlchemy是一个基于 Python实 ...

  7. js实现表单验证 常用JS表单验证

    CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...

  8. html 表单 dom 注意跟表单的name值一致

    html 表单 dom 注意跟表单的name值一致 <script type="text/javascript"> function checkForm() { var ...

  9. ajax和servlet交互,表单日历插件,表单验证,form.js

    我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...

随机推荐

  1. __new__方法首先调用并返回一个实例化对象

    >>> class CapStr(str): def __new__(cls,string): string = string.upper() return str.__new__( ...

  2. jacascript 滚动 scroll 与回到顶部

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...

  3. WPF中自定义GridLengthAnimation

    需求 我们想在编辑一个列表中某一个条目时,将编辑的详情内容也放置当前面,比如右侧. 可以通过将一个Grid,分成两个Cloumn,动态调整两个Cloumn的Width,就可以实现这个需求. 我们知道, ...

  4. 列表(list)之三 -如何较为均匀的将任意字符串按指定组数分组,方差最少

    当字符串的长度不是份数的整数倍时如何均匀地分割,例如:长度为11的字符串要分割成4份,有很多种分法,比如3, 3, 3, 2(前3个字符一份,中间3个一份,再中间3个一份,最后2个一份)这种是比较均匀 ...

  5. java之设计模式工厂三兄弟之抽象工厂模式

    [学习难度:★★★★☆,使用频率:★★★★★]  工厂方法模式通过引入工厂等级结构,解决了简单工厂模式中工厂类职责太重的问题,但由于工厂方法模式中的每个工厂只生产一类产品,可能会导致系统中存在大量的工 ...

  6. 在容器中运行 Jenkins pipeline 任务

    持续集成中的 pipeline 技术和 docker 都是当前正在发展的主流方向,当然把它们结合起来在 CI/CD 过程中发挥出更强大的威力也是大家共同的目标.本文将介绍如何在 Jenkins pip ...

  7. [LeetCode] Dota2 Senate 刀塔二参议院

    In the world of Dota2, there are two parties: the Radiant and the Dire. The Dota2 senate consists of ...

  8. [BZOJ 4361]isn

    Description 题库链接 给出一个长度为 \(n\) 的序列 \(A\) .如果序列 \(A\) 不是非降的,你必须从中删去一个数,这一操作,直到 \(A\) 非降为止.求有多少种不同的操作方 ...

  9. [AtCoder arc090F]Number of Digits

    Description 题库链接 记 \(d\) 在十进制下的位数为 \(f(d)\) .给出询问 \(S\) ,求有多少对 \((l,r)\) 使得 \[\sum_{i=l}^r f(i)=S\] ...

  10. [CQOI2013]棋盘游戏

    Description 一个n*n(n>=2)棋盘上有黑白棋子各一枚.游戏者A和B轮流移动棋子,A先走. A的移动规则:只能移动白棋子.可以往上下左右四个方向之一移动一格. B的移动规则:只能移 ...