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>

如你所见，我已经在下面的代码行中手动设置了宽度和高度。这是因为否则“盒子”会根据其中的数据和图像得到不同的大小。我需要两个“盒子”每行。

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

我如何才能使其具有响应性？

Answer 1

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