如何使用twitter bootstrap制作这种类型的网格系统？

Question

我试图建立一个像https://www.google.com/about/careers/这样的网格系统，任何人都知道如何以正确的方式做到这一点并支持移动设备？

Answer 1

请以完整页面模式查看演示

＆＃13;

＆＃13;

img {
        padding: 5px;
    }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="container-fluid">

        <p>Please see demo in full page mode.</p>
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-12">
                        <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-6 col-sm-6 col-xs-6">
                        <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <img src="https://services.google.com/fh/files/misc/careers-homepage-datacenter360.jpg" class="img-responsive">
                    </div>
                </div>
            </div>

        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;