使用bootstrap响应方案在盒子之间间隔
我有一个基于bootstrap的布局。
我在行之间手动添加了一个边距，但是当我调整页面大小时，我希望列之间也有垂直间距。
我该怎么做？
全尺寸浏览器
调整后的浏览器：
这里的答案是代码：
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row top-buffer">
<!-- VISITORS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of unique visitors to your web site"><small>?</small></span>
<br />
<span class="single-number-md">4,700</span>
<small>visitors</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">10%▲</span>
<div class="chart" style="height:105px;" id="visitors-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS IN PROGRESS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS IN PROGRESS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of trials in progress"><small>?</small></span>
<br />
<span class="single-number-md" data-toggle="counterup">235</span>
<small>trials</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="trials-in-progress-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- NEW CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">NEW CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of new customers acquired this month"><small>?</small></span>
<br />
<span class="single-number-md">56</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="new-customers-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer">
<!-- VISITORS TO TRIALS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS TO TRIALS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">5%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="visitors-to-trials-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS TO PURCHASE -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS TO PURCHASE <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">17%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="trials-to-purchase-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TOTAL CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TOTAL CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">488</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="total-customer-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer bottom-buffer">
<!-- FTE SALES REPS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FTE SALES REPRESENTATIVES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">6</span>
<small>sales reps</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">20%▲</span>
<div class="chart" style="height:105px;" id="fte-sales-reps-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- QUOTA PER SALES REP -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">QUOTA PER SALES REP <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">$4,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="quota-per-sales-rep-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- FORECASTED SALES -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FORECASTED SALES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">$25,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="forecasted-sales-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
</div>
<!--container-fluid-->
谢谢！
2 个答案:
答案 0 :(得分：2)
尝试使用这样的媒体查询：
@media (max-width:992px) {
.top-buffer > div {
margin-top:10px;
}
}
或者如果适合您的样式，您可以定位窗口小部件类：
@media (max-width:992px) {
.widget-body {
margin-top:10px;
}
}
选中 BootplyDemo
答案 1 :(得分：1)
您是否只需在窗口小部件类中添加margin-bottom: 30px并将其从行中删除？
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.widget-body {
margin-bottom: 30px;
}
.widget-white {
background-color: #fff;
}
.container-fluid {
background-color: #eee;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row top-buffer">
<!-- VISITORS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of unique visitors to your web site"><small>?</small></span>
<br />
<span class="single-number-md">4,700</span>
<small>visitors</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">10%▲</span>
<div class="chart" style="height:105px;" id="visitors-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS IN PROGRESS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS IN PROGRESS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of trials in progress"><small>?</small></span>
<br />
<span class="single-number-md" data-toggle="counterup">235</span>
<small>trials</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="trials-in-progress-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- NEW CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">NEW CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of new customers acquired this month"><small>?</small></span>
<br />
<span class="single-number-md">56</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="new-customers-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer">
<!-- VISITORS TO TRIALS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">VISITORS TO TRIALS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">5%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">7%▲</span>
<div class="chart" style="height:105px;" id="visitors-to-trials-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TRIALS TO PURCHASE -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TRIALS TO PURCHASE <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">17%</span>
<small>conversion</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="trials-to-purchase-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- TOTAL CUSTOMERS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">TOTAL CUSTOMERS</span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">488</span>
<small>customers</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="total-customer-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
<div class="row top-buffer bottom-buffer">
<!-- FTE SALES REPS -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FTE SALES REPRESENTATIVES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of visitors that have signed up for trial accounts"><small>?</small></span>
<br
/>
<span class="single-number-md" data-toggle="counterup">6</span>
<small>sales reps</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">20%▲</span>
<div class="chart" style="height:105px;" id="fte-sales-reps-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- QUOTA PER SALES REP -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">QUOTA PER SALES REP <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Percentage of trials converted to purchases"><small>?</small></span></span>
<br />
<span class="single-number-md">$4,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">9%▲</span>
<div class="chart" style="height:105px;" id="quota-per-sales-rep-chart"></div>
</div>
</div>
<!--/col-md-4-->
<!-- FORECASTED SALES -->
<div class="col-md-4">
<div class="widget-body widget-white fixed-h-single-number-chart-sm">
<span class="light-grey">FORECASTED SALES </span> <span class="badge badge-question" data-container="body" data-toggle="tooltip" data-placement="right" title="Number of total active customers"><small>?</small></span>
<br />
<span class="single-number-md">$25,200</span>
<small>dollars</small>
<span class="badge alert-success" data-container="body" data-toggle="tooltip" data-placement="right" title="Previous 30 days">2%▲</span>
<div class="chart" style="height:105px;" id="forecasted-sales-chart"></div>
</div>
</div>
<!--/col-md-4-->
</div>
<!--/row-->
</div>
<!--container-fluid-->
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？