html - 如何在不使用媒体查询的情况下填充 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。