用bootstrap的栅格“ coll-md- ”命令设置宽度总是不尽人意，有时上下框对不齐，有时上下宽度又不齐，这时建议用“style="width:100px" "
<
div
class
=
"page-header"
>
<
form
class
=
"form-horizontal"
>
<
div
class
=
"form-group form-group-lg"
>
<
label
class
=
"col-sm-2 control-label no-padding-right"
style
="
float
:
left
;
font-size
:
1em
;
font-family
:
Microsoft YaHei
;"
for
=
"form-field-userName1"
>
转运联单号
</
label
>
<
div
class
=
"col-sm-4"
>
<
input
class
=
"col-xs-12 col-sm-10"
type
=
"text"
id
=
"mission_id"
placeholder
=
"
请输入关键字搜索
"
/>
</
div
>
</
div
>
2.或者人用style属性
<
form
class
=
"form-horizontal"
>
<
div
class
=
"form-group"
>
<
label
class
=
"col-sm-1 control-label no-padding-right"
style
="
width
:
180px
;
font-size
:
1em
;
font-family
:
Microsoft YaHei
;"
for
=
"form-field-userName1"
>
任务单号
:
</
label
>
<
div
class
=
"col-sm-4"
>
<
input
class
=
"col-xs-12 col-sm-10"
type
=
"text"
id
=
"form-field-userName1"
placeholder
=
"
请输入关键字搜索
"
/>
</
div
>
</
div
>
</from>
对比可以看出来，使用第二种方法更加整齐些。
本人bootstrap刚入门，只是在做项目时遇到的问题和解决方法写下来，可能有时是错误的，请大家多多指教。
设定
宽度
我们可以使用 .w-* 类别设定HTML元素佔父元素宽的百分比。
设定值有: 25、50、75、100和auto，分别代表25%、50%、75%、100%和auto(自动，预设值)。
**範例: **
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comp
笔者用
Bootstrap
写网站自适应已经接近尾声了，这是第二篇也是最后一篇博客记录我写自适应遇到的坑。这次笔者主要讨论三个问题：如何用
Bootstrap
写侧边栏二级目录、div高度随内容变化、
设置
border
宽度
无效的问题。
一、
Bootstrap
写侧边栏二级菜单
笔者实现二级菜单其实是用标签页做的。先看最终结果，再讨论代码：
自适应移动端后的效果如下：
笔者的实现思想是把标签页目...
bootstrap
表格
是自适应的，但有些时候自动计算的列的
宽度
不太合适，如何调整？可以通过
col
group来控制单元格的
宽度
，如果只定义部分
宽度
，其他的单元格会自适应的调整。
[b]举例：[/b]
[img]http://htmljs.b0.upaiyun.com/uploads/1417587867010-Snip20141203_43.png[/img]
refer: [ur...
可以通过
设置
控件height、line-height、padding和font-size等属性实现控件高度的
设置
。
bootstrap
中对input、textarea和select控件使用两个类名来控制大小，但是都需要“form-control”维持基本样式：
input-
sm
：让控件比正常更小；
input-lg：让控件比正常更大。
//
class
="
col
-md-*" 其中的*表示列的
宽度
With twitter
bootstrap
3 use:
class
="
col
-md-*" where * is a number of
col
umns of width.
/
Bootstrap
中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-
sm
-min) { … }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-...
