使用引导程序在大型显示器上创建固定大小的正方形

Question

想要为大型显示器创建四个固定大小的正方形，它们之间有固定的间距，如下图所示，带有引导程序，并且由于某些原因我发现它非常棘手。

当我单独使用bootstrap来创建容器时，我目前遇到的问题是在大约1200-1400px大的显示器上，容器尺寸合适，但是间距是关闭的，并且非常大的显示器1400-1800 +，容器太宽，间距太高。

我的目标是使用bootstrap在大型显示器上创建固定间距的固定大小的div，即大于1200px的任何大小。

这就是我的尝试：

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
        <div class="service-container">
            <div class="service-nh">
                Square 1
            </div>
            Brown fox lazy jumped lorum ipsum foo bar
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
        <div class="service-container">
            <div class="service-nh">
                Square 2
            </div>
            Brown fox lazy jumped lorum ipsum foo bar
        </div>
    </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
        <div class="service-container">
            <div class="service-nh">
                Square 3
            </div>
            Brown fox lazy jumped lorum ipsum foo bar
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
        <div class="service-container">
            <div class="service-nh">
                Square 4
            </div>
            Brown fox lazy jumped lorum ipsum foo bar
        </div>
    </div>
</div>

大型显示器上的理想结果（固定间距的固定方块）：

Answer 1

试试这段代码可以正常使用

    <style>
     @media(min-width :1200px){

    .box{
    width:500px; 
    border:1px solid #000;
     margin:auto;"

    }



}

</style>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
<div class="box">
    <div class="service-container">
        <div class="service-nh">
            Square 1
        </div>
        Brown fox lazy jumped lorum ipsum foo bar
    </div>
    </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
<div class="box">
    <div class="service-container">
        <div class="service-nh">
            Square 2
        </div>
        Brown fox lazy jumped lorum ipsum foo bar
    </div>
</div>
</div> 
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
<div class="box">
    <div class="service-container">
        <div class="service-nh">
            Square 3
        </div>
        Brown fox lazy jumped lorum ipsum foo bar
    </div>
    </div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6" >
<div class="box">
    <div class="service-container">
        <div class="service-nh">
            Square 4
        </div>
        Brown fox lazy jumped lorum ipsum foo bar
    </div>
</div>
</div>
</div>