04-bootstrap布局練習(xí)

設(shè)計(jì)

代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<style>
    .col-sm-6,.col-sm-4,.col-sm-3,.col-sm-12,.col-sm-1{
        border:1px red solid;
        height:50px;
    }
    
    .col-sm-4{
        height:200px;
    }
    
</style>
</head>
<body>
    <div class=" well"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">col-sm-6</div>
            <div class="col-sm-6">col-sm-6</div>
        </div>
        <div class="row">
            <div class="col-sm-4">col-sm-4</div>
            <div class="col-sm-4">col-sm-4</div>
            <div class="col-sm-4">col-sm-4</div>
        </div>
        <div class="row">
            <div class="col-sm-3">col-sm-4</div>
            <div class="col-sm-3">col-sm-4</div>
            <div class="col-sm-3">col-sm-4</div>
            <div class="col-sm-3">col-sm-4</div>
        </div>
        <div class="row">
            <div class="col-sm-1 col-sm-offset-1">col-sm-1</div>
        </div>
    </div>
    <div class=" well" style="height:100px;"></div>
</body>
</html>


效果

列偏移

<div class="row">
            <div class="col-sm-1 col-sm-offset-1">col-sm-1</div>
</div>

最后一行偏移一個(gè)柵格。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容