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

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

语法：

案例：

Lorem ipsum
Phasellus iaculis

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样式将其隐藏。比如：

登录用户名

不显示样式引用bootstrap_Bootstrap的引用样式相关推荐

Typora主题代码更改(引用块颜色, 标题样式和颜色, 行内代码样式)
Typora主题库中的主题总有自己不喜欢的部分所以自己在github主题的基础上做了一些更改打开主题文件夹首先需要找到需要更改的文件的位置文件→偏好设置→外观→主题→打开主题文件夹给gith ...
CSS基础（样式声明、引用（行内样式、内部样式、外部样式、导入样式）、样式优先级）
目录什么是CSS 为什么使用css css样式规则 css引用(行内.内部.外部link链入.导入式@import) css三种使用方法的区别 ***网页三大元素*** ***什么是CSS*** ...
css 默认显示滚动条,css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
WPF实现纵向显示TabControl标题及标题字体样式
WPF实现纵向显示TabControl标题栏通过设置TabStripPlacement属性,标题字体纵向显示则可通过改变TabItem样式,在其中加入TextBlock控件,使用TextWrappin ...
网站ico图标不显示？网站ico图标引用的方法
网站ico图标不显示?网站ico图标引用的方法将favicon.ico图标放入网站根目录在页面中加入以下代码 <link rel="shortcut icon" href ...
解决： Vue 项目本地运行 run 与服务器上 build 样式不一致，build 后样式不生效
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:本人遇到这个问题是用文中最后一句话解决:" 在组件的样式中记得添加 'scoped' ...
WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
原文:WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等, ...
qt样式表设置边框_QT样式表
QT样式表一.QT样式表简介 1.QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能. QT样式表是允许用户定制widgets组件外观的强大机制 ...
python-docx 设置Table 边框样式、单元格边框样式
python-docx 设置Table 边框样式.单元格边框样式 from docx.oxml.ns import qn from docx.oxml import OxmlElement from ...

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

不显示样式引用bootstrap_Bootstrap的引用样式相关推荐

最新文章

热门文章

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

不显示样式 引用bootstrap_Bootstrap的引用样式相关推荐

最新文章

热门文章

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

不显示样式引用bootstrap_Bootstrap的引用样式相关推荐