專注Java教育14年
全國(guó)咨詢/投訴熱線：400-8080-105
更新時(shí)間：2022-12-16 14:55:08 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1348次
1、經(jīng)常會(huì)問(wèn)到的就是關(guān)于bootstrap排版問(wèn)題，比如這種：
2、下面我們來(lái)簡(jiǎn)單的做一下(有時(shí)候是手寫(xiě)代碼，所以有些class名稱我們還是需要記一下的)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>排版</title>
<link rel="stylesheet" >
</head>
<body>
<div class="row mt-3">
<div class="col-md-8 p-3 d-flex justify-content-center bg-primary col-12">8</div>
<div class="col-md-4 p-3 d-flex justify-content-center bg-success col-6">4</div>
</div>
<div class="row mt-3">
<div class="col-md-4 p-3 d-flex justify-content-center bg-primary col-6">4</div>
<div class="col-md-4 p-3 d-flex justify-content-center bg-success col-6">4</div>
<div class="col-md-4 p-3 d-flex justify-content-center bg-danger col-6 offset-3 offset-md-0">4</div>
</div>
<div class="row mt-3">
<div class="col-md-6 p-3 d-flex justify-content-center bg-primary col-6">6</div>
<div class="col-md-6 p-3 d-flex justify-content-center bg-success col-6">6</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
3、效果如圖：PC版
手機(jī)版：
以上就是“bootstrap的一道常見(jiàn)的排版面試題”，你能回答上來(lái)嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動(dòng)力節(jié)點(diǎn)Java官網(wǎng)。
相關(guān)閱讀
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)