Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > CSS-Tutorial > Verschachteltes Beispiel für ein Bootstrap-Rasterlayout

Verschachteltes Beispiel für ein Bootstrap-Rasterlayout

无忌哥哥

Freigeben： 2018-06-28 16:52:24

Original

2442 Leute haben es durchsucht

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerschachteltes Beispiel für ein Bootstrap-Rasterlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

bootstrap栅格，bootstrap布局

Quelle：php.cn

Vorheriger Artikel：Beispiel für den Spaltenversatz des Bootstrap-Rasterlayouts Nächster Artikel：Beispiel für die Spaltensortierung im Bootstrap-Rasterlayout

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors