Rumah > Artikel > hujung hadapan web > Bootstrap栅格布局的嵌套实例

Bootstrap栅格布局的嵌套实例

无忌哥哥asal: 2018-06-28 16:52:242428semak imbas

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <script src="jquery-3.2.1.js"></script>
    <script src="dist/js/bootstrap.js"></script>
    <title>栅格布局的嵌套</title>
    <style>
        .grid {
            border: 1px solid #696969;
            border-radius: 5px;
            background-color: lightskyblue;
            min-height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .green {
            background-color: lightgreen;
        }
        .pink {
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div class="col-sm-9 grid">
            Level 1: .col-sm-9
            <div>
                <div class="col-xs-8 col-sm-6 green">
                    Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6 pink">
                    Level 2: .col-xs-4 .col-sm-6
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Atas ialah kandungan terperinci Bootstrap栅格布局的嵌套实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

bootstrap

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bootstrap栅格布局的列偏移实例Artikel seterusnya：Bootstrap栅格布局的列排序实例

Artikel berkaitan

Lihat lagi