html - 垂直显示小部件框
问题描述
我目前对每条记录都有这种显示。
所以根据记录,我有两个盒子,分别是下午和晚上。如您所见,我使用此代码水平显示每条记录以供参考:
<div id="record_box">
<div class="row" style="padding-left: 10px; padding-right: 10px;">
<div class="col-lg-6">
<div class="widget style1 yellow-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="widget style1 lazur-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-left: 10px; padding-right: 10px;">
<div class="col-lg-6">
<div class="widget style1 yellow-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="widget style1 lazur-bg">
<div class="row">
<div class="col-4">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="col-8 text-right">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
</div>
所以每条记录都是这个块内的
<div class="row" style="padding-left: 10px; padding-right: 10px;">
但是如果我想垂直显示每条记录怎么办?在网格中,12 是最大尺寸对吗?我有一个需要显示的固定最大记录数,它只有 4 个。所以我可以让每条记录都像col-3
. 我所说的垂直的意思是如果我有 1 条记录,下午在顶部,然后晚上在底部。然后右边将是空白的。像这样:
解决方案
我已经为您创建了基本结构,现在您可以对其进行必要的更改。
CSS:
.panel-box {
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.panel-box .panel-heading {
padding: 20px 10px;border: 1px solid rgba(86,61,124,.2);
}
.panel-box .panel-heading .fa {
margin-top: 10px;
font-size: 58px;
}
.panel-box .list-group-item {
color: #777777;
border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-box .panel-body {
font-size: 20px;
color: #777777;
padding: 20px;
margin: 0px;border: 1px solid rgba(86,61,124,.2);
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-sun-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Afternoon Total Bets </span>
<h2 class="font-bold" id="afternoon"></h2>
</div>
</div>
<div class="panel panel-box">
<div class="panel-heading">
<i class="fa fa-moon-o fa-4x"></i>
</div>
<div class="panel-body text-center">
<span> Night Total Bets </span>
<h2 class="font-bold" id="night"></h2>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- ruby-on-rails - 提交后禁用功能规范检查表单按钮的问题
- amadeus - 无法在 Amadeus Flight Offers API 中使用 includedCheckedBags 属性
- ruby-on-rails - RVM - Ruby 更新 - 无法自动检测当前活动的 RVM gem 集名称
- angular - Angular 6 Error InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' 尝试访问嵌套数组时
- c++ - 应用程序(有时)在 PlaySound() 上崩溃
- python - 动态更改 QLabel 文本不起作用
- node.js - 规划器返回错误:无法找到 $geoNear 查询的索引
- ansible - 使用 awx/ansible 中的 requirements.yml 为角色签出相同的分支
- performance - Spark 读取分区 - 资源成本分析
- javascript - 标记预订/保留的时间段