正如前面所示，<pre>元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時(shí)候代碼太多，而且不想讓其占有太大的頁(yè)面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點(diǎn)，你只需要在pre標(biāo)簽上添加類名“.pre-scrollable”，就可以控制代碼塊區(qū)域最大高度為340px，一旦超出這個(gè)高度，就會(huì)在Y軸出現(xiàn)滾動(dòng)條。
/*源碼請(qǐng)查看bootstrap.css第731行~第734行*/
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
友情提示：如果您了解LESS或Sass這樣的CSS預(yù)定定義處理器，你完全可以通過code.less或者_code.scss文件修改樣式，然后重新編譯，你就可以得到屬于自己的代碼樣式風(fēng)格。
我也來試試：完成下面任務(wù)
在右側(cè)代碼編輯器的第12行補(bǔ)充代碼，讓代碼塊具有滾動(dòng)條。
正確代碼如下：
<pre class="pre-scrollable">
<ol>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ol>
</pre>
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)