Bootstrap CSS Calendar对齐几个月

时间:2014-12-05 17:42:16

标签: html css twitter-bootstrap

我真的希望有一个简单的解决方案。基本上在全屏幕上,我希望在一个柱子中显示两个月,在较小的设备上它会转换为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; ?>

0 个答案:

没有答案