我真的希望有一个简单的解决方案。基本上在全屏幕上,我希望在一个柱子中显示两个月,在较小的设备上它会转换为1列(我使用的是.col-md-6),总共3行显示6个月。如果每个div的大小相同,则此方法有效。当有一个月没有“天数块”时,这个问题就会出现
见这里:https://www.dropbox.com/s/1rrryqzzppql858/months.png?dl=0
是否有某种vertical-align css可用于bootstrap来解决这个问题?
这是我的代码:
<?php
$date = date_create("2015-01-01");
$date_end = date_create("2015-07-01");
while ($date < $date_end):?>
<div class="col-md-6 month_border">
<?php echo "<h2>".date_format($date,'F')."<small>".date_format($date,'Y')."</small></h2>"; ?>
<div class="row">
<?php
//date_format($date,'w') Day of week: 0 = Sunday
//date_format($date,'t') Number of days in current month
$weekday = date_format($date,'w');
$total_days = date_format($date,'t');
$days28 = 0;
if ($total_days == 28) {$days28 = 1;}
for ($day_block = 0 - $weekday + 1; $day_block <= $total_days + $days28; $day_block ++):?>
<?php if($day_block > 0 AND $day_block <= $total_days):?>
<div class="col-7split day_block" id="day_block-<?php echo date_format($date,'n')."-".$day_block; ?> "
data-toggle="modal" data-target="#myModal" data-whatever="@mdo">
<div class="row border bg-info">
<?php echo $day_block; ?>
</div>
<div class="row border">
<div class="col-sm-6 shift_text">
<?php if($day_block != 3) { echo "N"; } ?>
</div>
<div class="col-sm-6 compliment_text nopadding hidden-print">
</div>
</div>
<?php else:?>
<div class="col-7split day_block">
<?php endif; ?>
</div>
<?php endfor; ?>
</div>
</div>
<?php date_modify($date,"+1 months"); endwhile; ?>