3-21 块状按钮

从前面几节的内容中，大家可能发现了，每个示例中的按钮宽度都是依靠按钮文本和padding的值来决定。但有时候在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。那么前面的方法我们都无法很好的实现，除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。具体源码请查阅bootstrap.css文件第2340行～第2353行：

.btn-block {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.btn-block + .btn-block {
margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
width: 100%;
}

使用方法和前面的类似，只需要在原按钮类名上添加“.btn-block”类名，当然“.btn”类名是不可或缺的：

<button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btnbtn-primary btn-block" type="button">正常按钮</button>
<button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

运行效果如下：