Maison > Article > interface Web > Exemple de décalage de colonne de disposition de grille Bootstrap

Exemple de décalage de colonne de disposition de grille Bootstrap

无忌哥哥original: 2018-06-28 16:43:002410parcourir

<!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-md-4 grid">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4 grid">.col-md-4 .col-md-offset-4</div>
    </div>
    <div>
        <div class="col-md-3 col-md-offset-3 grid">.col-md-3 .col-md-offset-3</div>
        <div class="col-md-3 col-md-offset-3 grid">.col-md-3 .col-md-offset-3</div>
    </div>
    <div>
        <div class="col-md-6 col-md-offset-3 grid">.col-md-6 .col-md-offset-3</div>
    </div>
</div>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de système de disposition de grille BootstrapArticle suivant：Exemple de système de disposition de grille Bootstrap

Articles Liés

Voir plus