菜单选项卡在折叠时会失去方向
菜单选项卡在折叠时会失去方向
提问于 2018-05-28 19:11:10
我的代码是：
<!-- page content -->
<div class="right_col" role="main">
<c:if test="${not empty menuStructure.menus}">
<div class="row">
<c:forEach var="menu" items="${menuStructure.menus}"
varStatus="menuCounter">
<div class="col-md-3 col-sm-3 col-xs-12">
<div class="x_panel tile">
<div class="x_title">
<span style="font-size: 25px; color: #73879C !important; font-
weight:bold; font-size:1.0vw; margin-top:15px; font-weight:
400;">${menu.label}</span>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up">
</i></a>
</li> </ul>
<div class="clearfix"></div>
</div>
<div class="x_content" align="center" >
<a href="${menu.link}"><img
src="${contextPath}/resources/images/${menu.thumbnail}"
alt=""></a>
</div>
</div>
</div>
</c:forEach>
</div>
</c:if>
</div>
<!-- /page content -->我知道问题是所有的菜单标签都包含在引导类class="row"中，这就是为什么当第一行的最后一个标签折叠时，空间会被它下面的标签回收，但是我找不到解决这个问题的方法。
任何帮助都将不胜感激。谢谢。
回答 3
Stack Overflow用户
发布于 2018-05-28 19:17:39
你需要稍微改变一下你的结构，比如
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>意味着12列应该在单行中，所以你不会得到上面的问题
Stack Overflow用户
发布于 2018-05-28 19:36:13
您可以在css中使用第n个子对象作为清除。.col md-3:n个子对象(n+4){ .right_col : both；}
Stack Overflow用户
发布于 2018-05-28 20:23:11
function alignGrid(){
$(".sp-custom").remove();
var width=$(".row").width()-30;
var temp=0;
$(".row .grid-custom").each(function(index, item) {
temp=temp+$(item).width();
if((width-temp)<$(item).width()){
$(item).after('<div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 sp-custom"></div>');
temp=0;
}
});
}
alignGrid();
$( window ).resize(function() {
alignGrid();
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:grey;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:green;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightgrey;height:40px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:yellow;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:red;height:80px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:blue;height:10px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:cyan;height:100px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:lightblue;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:black;height:70px;">
</div>
<div class="grid-custom col-lg-2 col-md-3 col-sm-4 col-xs-6" style="background-color:brown;height:100px;">
</div>
</div>
</div>
您可以尝试上面的javascript代码。这段代码将在一行中的最后一个div之后插入div作为分隔符。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50565059
复制相关文章
相似问题
腾讯云开发者
