html - 向上移动 bootstrap 列

标签 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 -->

我想把(Listener Graph)面板推到规则栏下。我不确定如何执行此操作,如果不清楚,这里有一张我试图实现的图片。

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

最佳答案

原来我是个傻子。

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

关于html - 向上移动 bootstrap 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35532682/

相关文章:

php - 无法在外部 CSS 工作表中定义填充和边距

javascript - <JSP> 获取复选框的值

css - 如何在 OSX 的 vscode 中禁用所有自动格式化?

html - 如何使用 Bootstrap 限制元素宽度?

html - 表格中的样式 <th> 在 IE 中不起作用

javascript - IE7中的IFrame滚动条问题

javascript - jQuery 弹出框未显示

javascript - 在 Bootstrap 中更改断点处的元素位置

html - 嵌套 Bootstrap 列大小调整

html - 如何使脚本在页面加载时执行?