我需要将第5列面板对准col-sm-6断点
[英]I need to center align 5th column panel on col-sm-6 breakpoint
问题描述
我正在开发一个bootstrap项目（3.37，无法升级到4）。 我有一个奇数＃列（5列），每列都有自举面板。 我让它们居中，因为我需要它们，但是在小断点（768px和991px之间）中我想对齐第5个面板，因为我不喜欢它在这个视图中是如何失去平衡（在左边很重） 。 我希望它位于它上面的2个柱面板的中心。 到目前为止我尝试过的所有东西都无法使其对齐居中（左/右边距居中无效）。 任何帮助将不胜感激。 同样，唯一的问题是这个小的列断点，我需要它保持它在所有其他断点上的方式。
这是我所指的截图。
这是一个工作的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"> </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"> </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 个解决方案
解决方案1
1 已采纳 2018-03-13 05:36:59
希望这会帮助你。 工作实例
将文本中心类添加到.dashboardPanelsGroup div并添加以下css。
.dashboardPanels {
display: inline-block;
float: none;
width: 47%;
margin:10px 10px;
}
解决方案2
0 2018-03-13 04:53:11
添加类：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"> </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>
解决方案3
0 2018-03-13 04:58:56
您可以使用媒体查询@media (min-width: 768px) and (max-width: 991px) {}来实现此@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"> </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"> </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"> </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"> </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>
解决方案4
0 2018-03-13 05:15:10
您可以在媒体查询中添加以下次要css：@media（min-width：768px）和（max-width：1199px）
.dashboardPanels:nth-last-child(2){
margin-left:25%;
}
解决方案5
0 2018-03-13 06:40:14
好吧，如果你想将你的最后一个dashboardPanels div与768px和991px之间的中心对齐，请使用相同的bootstrap grid [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和lg
如何在具有4个img的引导程序（col xs-12 col-sm-6 col-md-2 col-lg-2）中居中？
[英]How to center a row in bootstrap(col xs-12 col-sm-6 col-md-2 col-lg-2), that has 4 imgs?
我的代码不起作用，因为我必须使这些表在 col-md-4 col-sm-6 col-xs-12 上响应
[英]My code is not working because i have to make these tables responsive on col-md-4 col-sm-6 col-xs-12
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
并排对齐元素-Bootstrap 4 col-sm-6不适用
连续将两个col-sm-6居中+一些基本的boostrap混淆
引导 col-md-4 到 col-sm-6
如何在具有4个img的引导程序（col xs-12 col-sm-6 col-md-2 col-lg-2）中居中？
Bootstrap Col-SM-6图标对齐
为什么不使用IE7 +的col-sm-6
Bootastrap-不支持Safari中的col-sm-6
我的代码不起作用，因为我必须使这些表在 col-md-4 col-sm-6 col-xs-12 上响应
Bootstrap 5 col-sm-6 和 col-md-4 不工作
将文本放在引导程序 5 行内的图像旁边 (col-sm-6)
相关标签