不显示样式 引用bootstrap_Bootstrap的引用样式

通过设置 display: inline-block; 并添加少量的内补(padding)，将所有元素放置于同一行。

语法：

• …

案例：

• Lorem ipsum
• Phasellus iaculis

&n

bsp;  

Nulla volutpat 运行结果：

有的时候，我们可能需要一个所有控件都在一行中的表单，比如图3-21所示的登录。要实现这种内联样式效果，只需要在普通的form元素上应用一个.form-inline样式，即可将表单内的元素设置为内联样式。

水平线上的唯一因素就是要控制元素的显示方式为display: inline-block，所以只需要为相应的子元素设置display属性即可。但需要注意的是，该.form-inline样式只能在大于768像素的浏览器上才能应用。源码如下：

// 源码1927行

@media (min-width: 768px) {  /* 大于768像素的浏览器才生效*/

.form-inline .form-group {

display: inline-block;  /* 内联样式显示*/

margin-bottom: 0;

vertical-align: middle;

}

.form-inline .form-control {

display: inline-block;

/* 内联样式显示,但由于form-control样式设置了100%的宽度,所以没什么用*/

width: auto;

vertical-align: middle;

}

.form-inline .radio,

.form-inline .checkbox {

display: inline-block;

padding-left: 0;

margin-top: 0;  /* 确保上下居中*/

margin-bottom: 0;

vertical-align: middle;

}

.form-inline .radio input[type="radio"],

.form-inline .checkbox input[type="checkbox"] {

float: none;  /* 不使用浮动定位*/

margin-left: 0;

}

.form-inline .has-feedback .form-control-feedback {    top: 0;  }

}要注意，由于默认的样式为.form-control，且其input、select和textarea的宽度都是100%，所以在使用内联表单的时候是无效的，需要对这些控件元素单独设置宽度width，或者外面再加上一层带有.form-group样式的div元素。示例如下：

记住密码

登录

但这种情况下，如果再设置一个label的话，input又换行了。所以如果非要label的话，那就只能在input所在div元素的上边再加一个div元素用于包含label标签。比如：

用户名:

如果没有为每个输入控件设置label，屏幕阅读器将无法正确识别。对于这种内联表单，可以通过为label设置.sr-only样式将其隐藏。比如：

登录用户名