從前面幾節(jié)的內(nèi)容中，大家可能發(fā)現(xiàn)了，每個(gè)示例中的按鈕寬度都是依靠按鈕文本和padding的值來決定。但有時(shí)候在制作按鈕的時(shí)候需要按鈕寬度充滿整個(gè)父容器（width:100%），特別是在移動(dòng)端的制作中。那么前面的方法我們都無法很好的實(shí)現(xiàn)，除非重新定義按鈕的寬度。其實(shí)在Bootstrap中并不需要這樣做，Bootstrap框架中提供了一個(gè)類名“btn-block”。按鈕使用這個(gè)類名就可以讓按鈕充滿整個(gè)容器，并且這個(gè)按鈕不會(huì)有任何的padding和margin值。在實(shí)際當(dāng)中，常把這種按鈕稱為塊狀按鈕。具體源碼請查閱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”類名，當(dāng)然“.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>

運(yùn)行效果如下：