网格系统——有可能吗？答案

【问题标题】：Grid System- Is it possible?网格系统——有可能吗？
【发布时间】：2017-01-07 01:01:18
【问题描述】：

我的代码如下：

<div class="container">
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">Some Codes Here</div>
</div>

我想使用宽度假设为 400 像素和高度：第一行/第一列 300 像素的内容
我想在第一行/第二列使用宽度为 400 像素且高度为 600 像素的内容
我想在第二行使用宽度为 400 像素且高度为 300 像素的内容。

我想要第二个内容，宽度：400 像素和高度：600 像素将显示到第二行

【问题讨论】：

网格系统的重点不是不将宽度固定为像素值吗？
Bootstrap 是为响应式设计而创建的，可以在不同屏幕尺寸的设备上工作。您可以保持所需的比例，但不能保持精确的尺寸。

标签： html twitter-bootstrap

【解决方案1】：

这是您可以使用引导程序执行的操作：

http://www.codeply.com/go/KaIvNu7qCT

看sn-p：

.wrp1 {
    background: orange;
    height: 25vw;
}
.wrp2 {
    background: teal;
    height: 25vw;
}
.wrp3 {
    background: tomato;
    height: 50vw;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12 wrp1">content1</div>    
                <div class="col-xs-12 wrp2">content2</div>    
            </div>    
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12 wrp3">content3</div>    
            </div>    
        </div>
    </div>
</div>

【讨论】：