如何在不使用媒体查询的情况下填补div的空白？

Question

我正在使用bootstrap卡在桌面上构建此布局：

到目前为止一直很好，在这个宽度一切都很好：

但是从宽度到桌面宽度，容器未填充：

使用图像构建卡片的HTML是：

<div class="card h-60">
                    <div>
                            <div class="row box">
                                    <div class="box-content formal">
                                            <div class="col-md-12">
                                                    <img class="imageban" src="img/crm.png" />
                                                    <span><b>CRM</b></span>
                                            </div>
                                    </div>
                                <div class="box-right">
                                    <a href="#">
                                        <img class="img-responsive" src="img/img1.jpg"/>
                                    </a>
                                </div>
                            </div>
                    </div> 
                    <div>
                        <div class="row box">
                                <div class="box-content report">
                                        <div class="col-md-12">
                                                <img class="imageban" src="img/report.png" />
                                                <span><b>Report</b></span>
                                        </div>
                                </div>
                            <div class="box-right">
                                <a href="#">
                                    <img class="imageban" src="img/img4.jpg"/>
                                </a>
                            </div>
                        </div>
                    </div> 
                    <div>
                        <div class="row box">
                            <div class="box-content formal">
                                    <div class="col-md-12">
                                            <img class="img-responsive" src="img/formal_notices.png" />
                                            <span><b>Formal Notices</b></span>
                                    </div>
                            </div>
                            <div class="box-content text">
                                <a href="#">
                                    Open the Formal <br>Notice Document <br>Library
                                </a>
                            </div>
                        </div>
                    </div> 
            </div>

而CSS只是这一行：

 .row.box{
     max-width: 345px;
 }

我被困在这里，任何帮助都会很好。谢谢。

Answer 1

您可以删除类.box并使用Bootstrap类而不是col-md-4 col-xs-12。