Bootstrap：如何以响应方式设置 DIV 的宽度和高度？

Question

我有一个 JSP 文件，我在其中生成包含数据的框。这些“盒子”是在for 循环内动态生成的。下面是代码

<div class="row pdb-30">

                    <c:choose>
                        <c:when test="${fn:length(adList)==0}">
                            <h3 style='color: #B2BABB; position: relative; left: 30%;'>
                               <fmt:message key="sorry_no_products" />
                            </h3>
                        </c:when>

                        <c:otherwise>
                            <c:forEach var="list" items="${adList}" varStatus="loop">
                                <div class="col-md-6" style="height: 300px; width: 50%;">

                                    <div class="row padd10 list-box">
                                        <div class="col-md-4"><img alt="" src="${list.productAdPhotoLocation.location}" class="img-responsive" ></div>
                                        <div class="col-md-8">
                                            <div class="row pdb-10">
                                                <div class="col-md-6"><h5 style="color:#F66334"><strong>${list.userName}</strong></h5></div>
                                                <!--                                        <div class="col-md-6"><span class="light-color text-center">1 Hour Ago<br>Expiring in week</span></div>-->
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="type" /></div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.type}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="quantity" /></div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.quantity} ${list.productUnitName}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="unit_price" /> (Rs)</div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.unitPrice}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-6 col-sm-6 col-xs-6"><fmt:message key="location" /> </div>
                                                <div class="col-md-6 col-sm-6 col-xs-6">: ${list.productSellAdvertisement.location}</div>
                                            </div>
                                            <div class="row pdb-10">
                                                <div class="col-md-12"><a href="LoadSingleSellAd?idSellAd=${list.productSellAdvertisement.idproductSellAdvertisement}" class="btn btn-primary green maxwidth"><fmt:message key="details" /></a></div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:forEach>
                        </c:otherwise>
                    </c:choose>
                </div>

如您所见，我在下面的行中手动设置了宽度和高度。那是因为否则“盒子”会根据其中的数据和图像获得不同的大小。我每行需要 2 个“盒子”。

<div class="col-md-6" style="height: 300px; width: 50%;">

我怎样才能使这个响应？

Answer 1

您似乎正在使用引导类。一种选择是删除您的内联样式，添加引导 css 并在链接 here 中查看引导网格系统的工作原理。