從前面幾節的內容中，大家可能發現了，每個示例中的按鈕寬度都是依靠按鈕文本和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>

運行效果如下：