有时候我们需要将表单的控件都在一行内显示。在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. Oracle Data Provider for .NET

    官方地址: http://www.oracle.com/technetwork/topics/dotnet/index-085163.html 终于有正式版了.不用装客户端,又小,确实好.

  2. EF Power Tools 数据库逆向生成时T4模板修改

    VS2013上使用EF Power Tools的Reverse Engineer Code First逆向生成. 发现数据库中的decimal(18, 4)字段在生成的mapping类中没有精度和小数 ...

  3. Storm系列(一):搭建dotNet开发Storm拓扑的环境

    上篇博客比较了目前流行的计算框架特性,如果你是 Java 开发者,那么根据业务场景选择即可:但是如果你是 .Net 开发者,那么三者都不能拿来即用,至少在这篇文章出现之前是如此.基于上篇文章的比较发现 ...

  4. CentOS 7最小化安装后找不到‘ifconfig’命令——修复小提示

    如果你不知道在哪里可以找到ifconfig命令,请按照以下简单的步骤来找到它.首先,让我们找出哪个包提供了ifconfig命令.要完成这项任务,输入以下命令: [root@jrserver app_f ...

  5. 烂泥:gpg加解密软件学习

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb. 为什么要学习gpg呢?因为要在Linux下把一个邮箱的密码加密,不让其他人看到该邮箱真 ...

  6. 烂泥:ESXI开启SNMP服务

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 要监控ESXI,打算通过snmp方式进行监控,这样操作比较简单.但是要使用SNMP方式进行监控,必须要开启ESXI的SNMP服务.ESXI由于版本号的不 ...

  7. date

    更改时区 用系统备好的时区文件覆盖掉当前的配置文件,/etc/里装的是当前系统的配置文件 $sudo cp /usr/share/zoneinfo/Asia/Chongqing /etc/localt ...

  8. Bootstrap模态框(modal)垂直居中

    http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...

  9. 关于/etc/rc.local以及/etc/init.d

    1. /etc/rc.local    这是使用者自订开机启动程序,把需要开机自动运行的程序写在这个脚本里   --------引用----------------------  在完成 run le ...

  10. hdu 4967 Handling the Past

    hdu 4967 Handling the Past view code//把时间离散化,维护一个线段(线段l到r的和用sum[l,r]表示),pop的时候就在对应的时间减一,push则相反 //那么 ...