<form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

需要手动设置宽度

在 Bootstrap 中,输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单,我们将这些元素的宽度设置为 width: auto;,因此,多个控件可以排列在同一行。根据你的布局需求,可能需要一些额外的定制化组件。

一定要添加 label 标签

如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为 label 设置 .sr-only 类将其隐藏。

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>

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

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

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


Bootstrap3 表单-输出内联表单的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:内联表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  3. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  4. Bootstrap内联表单

    有时候我们需要将表单的控件都在一行内显示,就需要将表单控件设置成内联块元素(display:inline-block). 在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<f ...

  5. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  6. SQL 表连接,内联、外联、全连

    内连接,join 或 inner join 两个表中符合条件的集合 外连接,left join  或  right  join 以left左边或right右边的表为数据集合行,根据条件,另一侧没有的数 ...

  7. Bootstrap系列 -- 13. 内联表单

    有时候我们需要将表单的控件都在一行内显示.在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可 如果你要在input ...

  8. bootstrap: 内联表单;

    <form class="form-inline"> <div class="form-group"> <label for=&q ...

  9. JS:操作样式表3:内联和外链样式

    var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...

随机推荐

  1. Hibernate(二):MySQL server version for the right syntax to use near 'type=InnoDB' at line x

    目前使用的hibernate5.2.9版本,配置的mysql方言为: <property name="hibernate.dialect">org.hibernate. ...

  2. linux samba服务配置

    1.下载 wget+rpm或yum install 2.配置/etc/samba/smb.conf cat smb.conf | grep setsebool 执行终端打印出来的字符串 setsebo ...

  3. 解决IOS移动端 Safari流浪器 onclick无法触发的问题

    在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变 ...

  4. java多线程的字符流与字节流

    字节流: package com.wz.thread.stream;import java.io.PipedOutputStream;/** * 字节输入流 * @author Administrat ...

  5. 机器学习技法:10 Random Forest

    Roadmap Random Forest Algorithm Out-Of-Bag Estimate Feature Selection Random Forest in Action Summar ...

  6. 【转】Apache服务器安全配置

    源URL:http://foreversong.cn/archives/789 偶然下载了今年ISC大会360应急响应中心的一个ppt,在最后有个攻防领域专家注册考试目录,其中有很大一块就是中间件的安 ...

  7. Redis管理之持久化

    Redis的一大重要特征就是支持持久化. Redis提供了两种不同的持久化方式:RDB和AOF. RDB持久化可以在指定的时间间隔内生成数据集的快照.由于是定期的生成数据集的快照,所以,如果服务器出现 ...

  8. 12563 Jin Ge Jin Qu hao

    • Don’t sing a song more than once (including Jin Ge Jin Qu). • For each song of length t, either si ...

  9. [BZOJ]1045 圆上的整点(HAOI2008)

    数学题第二弹! Description 求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. Input 一个正整数r. Output 整点个数. Sample Input 4 ...

  10. bzoj3223Tyvj 1729 文艺平衡树 splay

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 5644  Solved: 3362[Submit][Sta ...