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

  如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"/>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">密码</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/>
记住密码 </label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>

  在label标签运用了一个类名“sr-only”,可以将label标签影藏起来

Bootstrap系列 -- 13. 内联表单的更多相关文章

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

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

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

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

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

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

  4. Bootstrap3 表单-输出内联表单

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

  5. Bootstrap内联表单

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

  6. bootstrap: 内联表单;

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

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

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

  8. Bootstrap入门(五)表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  9. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

随机推荐

  1. crontab执行不生效-【问题篇】

    背景:shell脚本每隔两分钟从数据库取数据库放到脚本所在目录,做好计划任务发现不生效. 解决:脚本中文件路径问题 测试:在/data/test目录下写的脚本,直接在本目录touch以分钟结尾的文件. ...

  2. java.lang.UnsatisfiedLinkError: Unable to load library 'xxx': Native library (win32-x86-64/ID_Fpr.dll)

    使用 JNA 调用 dll 库,因为 dll 库是32 位的,而 jvm 是 64位的,所以发生的错误: java.lang.UnsatisfiedLinkError: Unable to load ...

  3. Linux磁盘管理之实现多文件系统及VFS06

    待续 Linux如何支持多文件系统 不同磁盘需要不同类型的磁盘驱动程序,驱动向上提供接口,不同驱动提供的接口格式不同,在上层是块设备层,用来屏蔽下边驱动接口的差别,向上统一提供,把所有硬盘当成块设备, ...

  4. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  5. Vim命令大全

    1.进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于 ...

  6. js对已经对象类型进行类型辨别

    typeof() Object.prototype.toString.call(data)

  7. ZooKeeper开发手册中文翻译(转)

    本文Github地址:https://github.com/sundiontheway/zookeeper-guide-cn 本文假设你已经具有一定分布式计算的基础知识.你将在第一部分看到以下内容: ...

  8. 在PYTHON中使用StringIO的性能提升实测(更新list-join对比)

    刚开始学习PYTHON,感觉到这个语言真的是很好用,可以快速完成功能实现. 最近试着用它完成工作中的一个任务:在Linux服务器中完成对.xml.gz文件的解析,生成.csv文件,以供SqlServe ...

  9. POJ3494Largest Submatrix of All 1’s[单调栈]

    Largest Submatrix of All 1’s Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 5883   Ac ...

  10. MVC code first数据迁移 转

    coptto:http://www.cnblogs.com/miro/p/4164076.html 本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时(见第三篇文章) ...