Bootstrap3 - 9.offset(偏移的空間)

想讓一個區塊向右偏移一定距離。在普通桌面電腦屏幕寬度以上向右邊偏移6個網格col-md-offset-6

代碼:

<!doctypoe html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h1 class="page-header">title</h1>
                <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                <div class="row">
                    <div class="col-md-4 ">
                        <h1 class="page-header">title</h1>
                        <p >retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                    </div>
                    <div class="col-md-4">
                        <h1 class="page-header">title</h1>
                        <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                    </div>
                    <div class="col-md-4 col-md-offset-6">
                        <h1 class="page-header">title</h1>
                        <p class="alert alert-info">retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <h1 class="page-header">sidebar</h1>
                <p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
            </div>
        </div>  
    </div>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>   
</body>
</html>


效果:

圖片.png
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第2章 Bootstrap 網格系統 在這一章,我們將討論Bootstrap一個最重要的功能:網格系統。我們將學會...
    海上名月閱讀 874評論 0 7
  • 前置知識 (默認 CSS) 一. 使用示例 二. 布局容器 顧名思義,就是放Bootstrap代碼的容器,只有放在...
    智慧與力量的賢者閱讀 579評論 0 0
  • Bootstrap是什么? 一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 10,925評論 3 184
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 1,805評論 0 2
  • 實現原理 網格系統的實現原理,僅僅是通過定義容器大小,平分12份(也有平分成24份或32份,但12份是最常見的),...
    lvyweb閱讀 1,636評論 1 2