移动bootstrap列

时间:2016-02-21 05:31:20

标签: html css twitter-bootstrap twitter-bootstrap-3

我想把列推上去,我不知道怎么做。这是我的代码

 <!-- Main content -->
            <section class="content">


            <div class="row">
                <div class="col-md-3">
                    <div class="sm-st clearfix">
                        <span class="sm-st-icon st-red"><i class="fa fa-calendar"></i></span>
                        <div class="sm-st-info">
                            <span><?php echo $slots;?></span>
                            Slots Booked  this week
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="sm-st clearfix">
                        <span class="sm-st-icon st-violet"><i class="fa fa-headphones"></i></span>
                        <div class="sm-st-info">
                            <span><?php echo $listeners;?></span>
                            Listeners tuned in now
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="sm-st clearfix">
                        <span class="sm-st-icon st-blue"><i class="fa fa-envelope-o"></i></span>
                        <div class="sm-st-info">
                            <span>21</span>
                            Requests sent in
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="sm-st clearfix">
                        <span class="sm-st-icon st-green"><i class="fa fa-users"></i></span>
                        <div class="sm-st-info">
                            <span>18</span>
                            Staff
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8">
                    <section class="panel">
                        <header class="panel-heading">

                        </header>
                        <div class="panel-body">

                        </div>
                    </section>
                </div>
                <div class="col-md-4">
                    <section class="panel">
                        <header class="panel-heading">
                            Last 15 played song.
                        </header>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <tr>
                                    <th>Artist</th>
                                    <th>Track</th>
                                </tr>
                                <?php
                                echo $tracks;
                                ?>

                            </table>
                        </div>
                    </section>
                </div>
                <div class="col-md-8">
                    <!--earning graph start-->
                    <section class="panel">
                        <header class="panel-heading">
                            6 hour Listener Graph
                        </header>
                        <div class="panel-body">
                            <canvas id="linechart" width="500" height="330" style="width:100%;"></canvas>
                        </div>
                    </section>
                 </div>
                <div class="col-lg-4">
                    <!--chat start-->
                    <section class="panel">
                        <header class="panel-heading">
                            Whats been Happen-taning!
                        </header>
                        <div class="panel-body" id="noti-box">
                        </div>
                    </section>
                </div>
            </div>


            </section><!-- /.content -->

我想在rules列下推送(Listener Graph)面板。我不知道该怎么做,如果不清楚这里是我试图实现的图片。

http://i.imgur.com/Q0D6xcv.png

2 个答案:

答案 0 :(得分:1)

原来我是愚蠢的。

只需将它们放在同一列中,而不是有多列。

答案 1 :(得分:1)

您将 class =“row”放在面板上。删除 class =“row”。 Row表示水平方向的一条线。所以需要“最后15首播放歌曲”和“通过查看插槽.....(面板)”作为一行。