垂直显示小部件框
Displaying Widget Boxes Vertically
我目前每条记录都有这种显示。
所以每条记录我有两个框,分别是下午和晚上。如您所见,我使用以下代码水平显示每条记录以供参考:
<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>
这将生成如下图所示的结构:
我目前每条记录都有这种显示。
所以每条记录我有两个框,分别是下午和晚上。如您所见,我使用以下代码水平显示每条记录以供参考:
<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>
这将生成如下图所示的结构: