我需要将col-sm-6断点上的第5列面板对齐

时间：2018-03-13 04:35:09

标签： html css twitter-bootstrap

我正在开发一个bootstrap项目（3.37，无法升级到4）。我有一个奇数＃列（5列），每列都有自举面板。我让它们居中，因​​为我需要它们，但是在小断点（768px和991px之间）中我想对齐第5个面板，因为我不喜欢它在这个视图中是如何失去平衡（在左边很重） 。我希望它位于它上面的2个柱面板的中心。到目前为止我尝试过的所有东西都无法使其对齐居中（左/右边距居中无效）。任何帮助将不胜感激。同样，唯一的问题是这个小的列断点，我需要它保持它在所有其他断点上的方式。

以下是我所指的截图。 enter image description here

这是一个有效的jsfiddle：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 */

5 个答案:

答案 0 :(得分：1)

希望这会对你有所帮助。 Working Example

将文本中心类添加到.dashboardPanelsGroup div并添加以下css。

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

答案 1 :(得分：0)

添加课程：col-sm-offset-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>

enter image description here

答案 2 :(得分：0)

您可以使用媒体查询@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.

工作代码

＆＃13;
＆＃13; 
.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;	
	}
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或

您可以使用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"> .

工作代码

＆＃13;
＆＃13; 
.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 */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以在媒体查询中添加以下次要CSS：@media（最小宽度：768px）和（最大宽度：1199px）

.dashboardPanels:nth-last-child(2){
  margin-left:25%;
}

答案 4 :(得分：0)

好吧，如果您想将上一个dashboardPanels div与768px和991px之间的中心对齐，请使用相同的引导网格 [offset column] 类... 

<div class="dashboardCharts dashboardPanels col-sm-6 col-sm-offset-3 col-md-2 col-md-offset-0 col-lg-3 col-lg-offset-0 hide">
  ...some content goes here
</div>

注意： 您还需要使用col-md-offset-0 col-lg-offset-0来重置上部断点中的偏移量，例如md和{{ 1}}

相关问题
最新问题