布局容器和栅格网络系统

最新推荐文章于 2024-11-07 13:56:28 发布

南栀子。

最新推荐文章于 2024-11-07 13:56:28 发布

阅读量108

点赞数

分类专栏： Bootstrap 文章标签： html css bootstrap

本文链接：https://blog.csdn.net/qq_38191971/article/details/113733606

版权

Bootstrap 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

列组合和列偏移和列排序和列嵌套

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/>
</head>
<body>
<div style="background-color: #e5ff2c">#</div>
<div style="background-color: #00AA88">#</div>
<hr/>
<div class="container">
    {#    lie zuhe#}
    <div class="row">
        <div class="col-md-4" style="background-color: #e5ff2c">4</div>
        <div class="col-md-8" style="background-color: #00AA88">8</div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-md-1" style="background-color: #2B81AF">1</div>
        <div class="col-md-1" style="background-color: #3C510C">1</div>
        <div class="col-md-1" style="background-color: #99CC66">1</div>
        <div class="col-md-1" style="background-color: #0D3349">1</div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-md-3" style="background-color: #2B81AF">3</div>
        <div class="col-md-3" style="background-color: #3C510C">3</div>
        <div class="col-md-3" style="background-color: #99CC66">3</div>
        <div class="col-md-3" style="background-color: #0D3349">3</div>
    </div>
    <hr/>
    {#    lie pianyi#}
    <div class="row">
        <div class="col-md-1" style="background-color: #2B81AF">1</div>
        <div class="col-md-1 col-md-offset-1" style="background-color: #3C510C">1</div>
        <div class="col-md-1 col-md-offset-1" style="background-color: #99CC66">1</div>
        <div class="col-md-1 col-md-offset-1" style="background-color: #0D3349">1</div>
    </div>
    <hr/>
    {#    lie paixu#}
    <div class="row">
        <div class="col-md-1 col-md-push-1" style="background-color: #2B81AF">1</div>
        <div class="col-md-1 col-md-pull-1" style="background-color: #3C510C">1</div>
        <div class="col-md-1" style="background-color: #99CC66">1</div>
        <div class="col-md-1" style="background-color: #0D3349">1</div>
    </div>
    <hr/>
    {#    lie qiantao#}
    <div class="row">
        <div class="col-md-6" style="background-color: #00b3ee">
            <div class="row">
                <div class="col-md-1 col-sm-6 col-lg-1" style="background-color: #2ECC40">1</div>
                <div class="col-md-9 col-sm-6 col-lg-9" style="background-color: #C6E746">9</div>
            </div>
        </div>
        <div class="col-md-6" style="background-color: navajowhite">6</div>
    </div>



</div>
</body>
</html>