文章/答案/技术大牛

发布

社区首页 >问答首页 >我需要对齐第5列面板上的column 6断点。

问我需要对齐第5列面板上的column 6断点。
EN

Stack Overflow用户

提问于 2018-03-13 04:35:09

回答 5查看 194关注 0票数 3

我正在做一个引导项目(3.37，不能升级到4)。我有一个奇怪的列# (5列)，每列都有引导面板。我有他们的中心，因为我需要他们，但在小断点(768 at和991 at之间)，我想中心对齐第5面板，因为我不喜欢它是如何不平衡(沉重的左边)在这个视图。我希望它是居中的2列面板之上。到目前为止，我尝试的一切都无法使它对齐居中(以左/右边距为中心什么都不做)。任何帮助都将不胜感激。同样，唯一的问题是这个小的列断点，我需要它保持它在所有其他断点上的方式。

这是我所指的截图。

下面是一个正在工作的小提琴：https://jsfiddle.net/ogcvrzc6/5/

HTML：

<!--Dashboard Top Panels-->
                <div class="dashboardPanelsGroup fivecolumns">
                    <div class="dashboardDevices dashboardPanels col-sm-6 col-md-2 col-lg-3">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                            <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                <div class="row">
                                    <div class="col-xs-3 dashIcon">
                                        <i class="fa fa-laptop"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">1344</div>
                                        <div class="dashSubText">Computers</div>
                                    </div>
                                </div>
                            </div>
                            <a class="dashPanelFooter" href="#">
                                <div class="panel-footer">
                                    <span class="pull-left">View Devices</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="dashboardMaintStats dashboardPanels col-sm-6 col-md-2 col-lg-3">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                            <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                <div class="row">
                                    <div class="col-xs-3 dashIcon">
                                        <i class="fa fa-bar-chart"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">94%</div>
                                        <div class="dashSubText">Passed</div>
                                    </div>
                                </div>
                            </div>
                            <a class="dashPanelFooter" href="#">
                                <div class="panel-footer">
                                    <span class="pull-left">View Maint Stats</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="dashboardBite dashboardPanels col-sm-6 col-md-2 col-lg-3">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                            <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                <div class="row">
                                    <div class="col-xs-3 dashIcon">
                                        <i class="fa fa-line-chart"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">BITE</div>
                                        <div class="dashSubText">Report</div>
                                    </div>
                                </div>
                            </div>
                            <a class="dashPanelFooter" href="#">
                                <div class="panel-footer">
                                    <span class="pull-left">View BITE Report</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="dashboardAlerts dashboardPanels col-sm-6 col-md-2 col-lg-3">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                            <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                <div class="row">
                                    <div class="col-xs-3 dashIcon">
                                        <i class="fa fa-warning"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">44</div>
                                        <div class="dashSubText">Alerts</div>
                                    </div>
                                </div>
                            </div>
                            <a class="dashPanelFooter" href="#">
                                <div class="panel-footer">
                                    <span class="pull-left">View Alerts</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="dashboardOptions dashboardPanels col-sm-6 col-md-2 col-lg-3">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                            <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                <div class="row">
                                    <div class="col-xs-3 dashIcon">
                                        <i class="fa fa-cogs"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">Options</div>
                                        <div class="dashSubText">&nbsp;</div>
                                    </div>
                                </div>
                            </div>
                            <a class="dashPanelFooter" href="#">
                                <div class="panel-footer">
                                    <span class="pull-left">View Options</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="dashboardCharts dashboardPanels col-sm-6 col-md-2 col-lg-3 hide">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                            <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                <div class="row">
                                    <div class="col-xs-3 dashIcon">
                                        <i class="fa fa-area-chart"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">Charts</div>
                                        <div class="dashSubText">&nbsp;</div>
                                    </div>
                                </div>
                            </div>
                            <a class="dashPanelFooter" href="#">
                                <div class="panel-footer">
                                    <span class="pull-left">View Charts</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!--End Dashboard Top Panels-->

CSS：

.dashboardPanelsGroup {
    padding-top: 20px;
}
.dashboardPanelsGroup .panel-footer {
    padding: 5px 15px;
}
.dashboardpanels {
    border-radius: 5px; 
}
.dashIcon {
    font-size: 45px;
    margin-top: -10px;
}
.huge {
    font-size: 30px;
    font-weight: bold;
}
.dragPanelTop {
    font-size: 11px;
    float: right;
    cursor: move;
    opacity: .5;
    margin-top: -10px;
    margin-right: -10px;
    margin-bottom: -5px;
}
.dragPanelBottom {
    border-right: thin solid rgba(255, 255, 255, 0.5);
    font-size: 14px;
    width: 20px;
    float: left;
    cursor: move;
    margin-left: -5px;
    opacity: .5;
}

.dashboardDevices .panel-primary {
    border-color: #252d44;
}
.dashboardDevices .panel-heading {
    background-color: #252d44;
    border-bottom: none;
}
.dashboardDevices .dashPanelFooter {
    color: #252d44;
}
.dashboardMaintStats .panel-primary {
    border-color: #06bd0a;
}
.dashboardMaintStats .panel-heading {
    background-color: #06bd0a;
    border-bottom: none;
}
.dashboardMaintStats .dashPanelFooter {
    color: #06bd0a;
}
.dashboardBite .panel-primary {
    border-color: #ee7a23;
}
.dashboardBite .panel-heading {
    background-color: #ee7a23;
    border-bottom: none;
}
.dashboardBite .dashPanelFooter {
    color: #ee7a23;
}
.dashboardAlerts .panel-primary {
    border-color: #b20a11;
}
.dashboardAlerts .panel-heading {
    background-color: #b20a11;
    border-bottom: none;
}
.dashboardAlerts .dashPanelFooter {
    color: #b20a11;
}
.dashboardOptions .panel-primary {
    border-color: #1e4620;
}
.dashboardOptions .panel-heading {
    background-color: #1e4620;
    border-bottom: none;
}
.dashboardOptions .dashPanelFooter {
    color: #1e4620;
}
.dashboardCharts .panel-primary {
    border-color: #565253;
}
.dashboardCharts .panel-heading {
    background-color: #565253;
    border-bottom: none;
}
.dashboardCharts .dashPanelFooter {
    color: #565253;
}
.dashboardPanelsOpen {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.dashboardPanelsOpen .panel-heading .close {
    color: #ffffff;
    margin-top: -10px;
    margin-right: -5px;
    opacity: .9;
}
.dashboardPanelsOpen .panel-heading .close:hover {
    opacity: .5;
}
.dashboardPanelsOpen .dashIcon{
    font-size: 25px;
    vertical-align: middle;
    padding: 0 15px 0 10px;
}
.dashboardPanelsOpen .openDashTitle {
    vertical-align: middle;
    font-size: 18px;
}
.panelDashboardContent {
    padding: 0 15px;
}
.openedDashboardPanelsGroup .panel-heading {
    margin-bottom: 25px;
}

/* start of modification for 5 columns */
@media (min-width: 991px){
    .fivecolumns .col-md-2, .fivecolumns .col-lg-3  {
    width: 20%;
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .dashboardPanelsGroup .huge {
        font-size: 20px;
    }
    .dashSubText {
        font-size: 11px;
    }
    .dashIcon {
        font-size: 35px;
    }
}
/* end of modification for 5 columns */

html

css

twitter-bootstrap

回答 5

Stack Overflow用户

回答已采纳

发布于 2018-03-13 05:36:59

希望这能帮到你。工作实例

向.dashboardPanelsGroup div添加文本中心类，并添加以下css。

.dashboardPanels {
    display: inline-block;
    float: none;
    width: 47%;
    margin:10px 10px;
}

票数 1

Stack Overflow用户

发布于 2018-03-13 04:53:11

添加类:col-sm-偏移量-3

<div class="dashboardOptions dashboardPanels col-sm-offset-3 col-sm-6 col-md-2 col-lg-3">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                    <div class="row">
                                        <div class="col-xs-3 dashIcon">
                                            <i class="fa fa-cogs"></i>
                                        </div>
                                        <div class="col-xs-9 text-right">
                                            <div class="huge">Options</div>
                                            <div class="dashSubText">&nbsp;</div>
                                        </div>
                                    </div>
                                </div>
                                <a class="dashPanelFooter" href="#">
                                    <div class="panel-footer">
                                        <span class="pull-left">View Options</span>
                                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                        <div class="clearfix"></div>
                                    </div>
                                </a>
                            </div>
                        </div>

票数 0

Stack Overflow用户

发布于 2018-03-13 04:58:56

您可以通过使用媒体查询@media (min-width: 768px) and (max-width: 991px) {}来实现这一点。

我添加了一个额外的类sm-center <div class="dashboardOptions dashboardPanels col-sm-12 col-md-2 col-lg-3">。

并向此添加媒体查询。

Here is the working code.

You can see the Media query on last line.

工作代码

.dashboardPanelsGroup {
    padding-top: 20px;
}
.dashboardPanelsGroup .panel-footer {
    padding: 5px 15px;
}
.dashboardpanels {
    border-radius: 5px; 
}
.dashIcon {
    font-size: 45px;
    margin-top: -10px;
}
.huge {
    font-size: 30px;
    font-weight: bold;
}
.dragPanelTop {
    font-size: 11px;
    float: right;
    cursor: move;
    opacity: .5;
    margin-top: -10px;
    margin-right: -10px;
    margin-bottom: -5px;
}
.dragPanelBottom {
    border-right: thin solid rgba(255, 255, 255, 0.5);
    font-size: 14px;
    width: 20px;
    float: left;
    cursor: move;
    margin-left: -5px;
    opacity: .5;
}

.dashboardDevices .panel-primary {
    border-color: #252d44;
}
.dashboardDevices .panel-heading {
    background-color: #252d44;
    border-bottom: none;
}
.dashboardDevices .dashPanelFooter {
    color: #252d44;
}
.dashboardMaintStats .panel-primary {
    border-color: #06bd0a;
}
.dashboardMaintStats .panel-heading {
    background-color: #06bd0a;
    border-bottom: none;
}
.dashboardMaintStats .dashPanelFooter {
    color: #06bd0a;
}
.dashboardBite .panel-primary {
    border-color: #ee7a23;
}
.dashboardBite .panel-heading {
    background-color: #ee7a23;
    border-bottom: none;
}
.dashboardBite .dashPanelFooter {
    color: #ee7a23;
}
.dashboardAlerts .panel-primary {
    border-color: #b20a11;
}
.dashboardAlerts .panel-heading {
    background-color: #b20a11;
    border-bottom: none;
}
.dashboardAlerts .dashPanelFooter {
    color: #b20a11;
}
.dashboardOptions .panel-primary {
    border-color: #1e4620;
}
.dashboardOptions .panel-heading {
    background-color: #1e4620;
    border-bottom: none;
}
.dashboardOptions .dashPanelFooter {
    color: #1e4620;
}
.dashboardCharts .panel-primary {
    border-color: #565253;
}
.dashboardCharts .panel-heading {
    background-color: #565253;
    border-bottom: none;
}
.dashboardCharts .dashPanelFooter {
    color: #565253;
}
.dashboardPanelsOpen {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.dashboardPanelsOpen .panel-heading .close {
    color: #ffffff;
    margin-top: -10px;
    margin-right: -5px;
    opacity: .9;
}
.dashboardPanelsOpen .panel-heading .close:hover {
    opacity: .5;
}
.dashboardPanelsOpen .dashIcon{
    font-size: 25px;
    vertical-align: middle;
    padding: 0 15px 0 10px;
}
.dashboardPanelsOpen .openDashTitle {
    vertical-align: middle;
    font-size: 18px;
}
.panelDashboardContent {
    padding: 0 15px;
}
.openedDashboardPanelsGroup .panel-heading {
    margin-bottom: 25px;
}

/* start of modification for 5 columns */
@media (min-width: 991px){
    .fivecolumns .col-md-2, .fivecolumns .col-lg-3  {
    width: 20%;
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .dashboardPanelsGroup .huge {
        font-size: 20px;
    }
    .dashSubText {
        font-size: 11px;
    }
    .dashIcon {
        font-size: 35px;
    }
}
/* end of modification for 5 columns */


@media (min-width: 768px) and (max-width: 991px) {
	.sm-center.dashboardOptions .panel-primary {
		width: 50%;
		margin: 0 auto;	
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!--Dashboard Top Panels-->
<div class="dashboardPanelsGroup fivecolumns">
    <div class="dashboardDevices dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-laptop"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">1344</div>
                        <div class="dashSubText">Computers</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Devices</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardMaintStats dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-bar-chart"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">94%</div>
                        <div class="dashSubText">Passed</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Maint Stats</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardBite dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-line-chart"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">BITE</div>
                        <div class="dashSubText">Report</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View BITE Report</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardAlerts dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-warning"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">44</div>
                        <div class="dashSubText">Alerts</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Alerts</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardOptions dashboardPanels col-sm-12 sm-center col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-cogs"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">Options</div>
                        <div class="dashSubText">&nbsp;</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Options</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardCharts dashboardPanels col-sm-6 col-md-2 col-lg-3 hide">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-area-chart"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">Charts</div>
                        <div class="dashSubText">&nbsp;</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Charts</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
</div>

或

您可以使用bootstrap实用工具类offset class来居中。

将此col-sm-offset-3 col-xs-offset-0 col-md-offset-0 col-lg-offset-0添加到此<div class="dashboardOptions dashboardPanels col-sm-12 col-md-2 col-lg-3"> .中

工作代码

.dashboardPanelsGroup {
    padding-top: 20px;
}
.dashboardPanelsGroup .panel-footer {
    padding: 5px 15px;
}
.dashboardpanels {
    border-radius: 5px; 
}
.dashIcon {
    font-size: 45px;
    margin-top: -10px;
}
.huge {
    font-size: 30px;
    font-weight: bold;
}
.dragPanelTop {
    font-size: 11px;
    float: right;
    cursor: move;
    opacity: .5;
    margin-top: -10px;
    margin-right: -10px;
    margin-bottom: -5px;
}
.dragPanelBottom {
    border-right: thin solid rgba(255, 255, 255, 0.5);
    font-size: 14px;
    width: 20px;
    float: left;
    cursor: move;
    margin-left: -5px;
    opacity: .5;
}

.dashboardDevices .panel-primary {
    border-color: #252d44;
}
.dashboardDevices .panel-heading {
    background-color: #252d44;
    border-bottom: none;
}
.dashboardDevices .dashPanelFooter {
    color: #252d44;
}
.dashboardMaintStats .panel-primary {
    border-color: #06bd0a;
}
.dashboardMaintStats .panel-heading {
    background-color: #06bd0a;
    border-bottom: none;
}
.dashboardMaintStats .dashPanelFooter {
    color: #06bd0a;
}
.dashboardBite .panel-primary {
    border-color: #ee7a23;
}
.dashboardBite .panel-heading {
    background-color: #ee7a23;
    border-bottom: none;
}
.dashboardBite .dashPanelFooter {
    color: #ee7a23;
}
.dashboardAlerts .panel-primary {
    border-color: #b20a11;
}
.dashboardAlerts .panel-heading {
    background-color: #b20a11;
    border-bottom: none;
}
.dashboardAlerts .dashPanelFooter {
    color: #b20a11;
}
.dashboardOptions .panel-primary {
    border-color: #1e4620;
}
.dashboardOptions .panel-heading {
    background-color: #1e4620;
    border-bottom: none;
}
.dashboardOptions .dashPanelFooter {
    color: #1e4620;
}
.dashboardCharts .panel-primary {
    border-color: #565253;
}
.dashboardCharts .panel-heading {
    background-color: #565253;
    border-bottom: none;
}
.dashboardCharts .dashPanelFooter {
    color: #565253;
}
.dashboardPanelsOpen {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.dashboardPanelsOpen .panel-heading .close {
    color: #ffffff;
    margin-top: -10px;
    margin-right: -5px;
    opacity: .9;
}
.dashboardPanelsOpen .panel-heading .close:hover {
    opacity: .5;
}
.dashboardPanelsOpen .dashIcon{
    font-size: 25px;
    vertical-align: middle;
    padding: 0 15px 0 10px;
}
.dashboardPanelsOpen .openDashTitle {
    vertical-align: middle;
    font-size: 18px;
}
.panelDashboardContent {
    padding: 0 15px;
}
.openedDashboardPanelsGroup .panel-heading {
    margin-bottom: 25px;
}

/* start of modification for 5 columns */
@media (min-width: 991px){
    .fivecolumns .col-md-2, .fivecolumns .col-lg-3  {
    width: 20%;
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .dashboardPanelsGroup .huge {
        font-size: 20px;
    }
    .dashSubText {
        font-size: 11px;
    }
    .dashIcon {
        font-size: 35px;
    }
}
/* end of modification for 5 columns */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!--Dashboard Top Panels-->
<div class="dashboardPanelsGroup fivecolumns">
    <div class="dashboardDevices dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-laptop"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">1344</div>
                        <div class="dashSubText">Computers</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Devices</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardMaintStats dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-bar-chart"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">94%</div>
                        <div class="dashSubText">Passed</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Maint Stats</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardBite dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-line-chart"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">BITE</div>
                        <div class="dashSubText">Report</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View BITE Report</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardAlerts dashboardPanels col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-warning"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">44</div>
                        <div class="dashSubText">Alerts</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Alerts</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardOptions dashboardPanels col-sm-offset-3 col-xs-offset-0 col-md-offset-0 col-lg-offset-0 col-sm-6 col-md-2 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-cogs"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">Options</div>
                        <div class="dashSubText">&nbsp;</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Options</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
    <div class="dashboardCharts dashboardPanels col-sm-6 col-md-2 col-lg-3 hide">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                <div class="row">
                    <div class="col-xs-3 dashIcon"> <i class="fa fa-area-chart"></i> </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">Charts</div>
                        <div class="dashSubText">&nbsp;</div>
                    </div>
                </div>
            </div>
            <a class="dashPanelFooter" href="#">
            <div class="panel-footer"> <span class="pull-left">View Charts</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
            </a> </div>
    </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49248406

复制

相似问题

问我需要对齐第5列面板上的column 6断点。
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我需要对齐第5列面板上的column 6断点。EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我需要对齐第5列面板上的column 6断点。
EN