css - 使用 Bootstrap 在大型显示器上创建固定大小的正方形

Question

希望使用 Bootstrap 为大型显示器创建四个固定大小的正方形，它们之间的间距固定，如下图所示，但出于某种原因我发现它非常棘手。

我目前在仅使用 bootstrap 创建容器时遇到的问题是，在大约 1200-1400px 大的显示器上，容器大小没问题，但间距不对，在非常大的显示器上 1400-1800+，容器太宽，间距也太高。

我的目标是使用 Bootstrap 在大型显示器上创建具有固定间距的固定大小的 div，即任何大于 1200 像素的东西。

这是我尝试过的:

<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>

大型显示器上的预期结果(具有固定间距的固定方 block ):

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>