“显示更多”选项在引导列中展开所有相邻列
“显示更多”选项在引导列中展开所有相邻列
提问于 2015-11-01 12:14:08
我正在开发一个使用Bootstrap的网站。桌面布局在每一行中有4列(类似于布局的网格块)。每个瓷砖都有一些冗长的文本，我用jQuery插件成功地折叠了起来。
现在，我面临的问题是，当使用“显示更多”选项时，该瓷砖的内容就会扩展，从而将砖块向下推。然而，它也扩展了所有其他列的块。如何防止其他柱面砖的尺寸扩大？
我只希望将该列向下扩展，在该列中，单击了一个瓷砖的“显示更多”选项。
法线视图 正常视点
单击“显示更多”后的 单击“显示更多”之后
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-01 19:41:04
好的，那么您的引导布局可能不正确。这一结构应能发挥作用：
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row ">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12" style="height:150px; border: 1px solid #fff; background:blue">
</div>
<div class="col-xs-12" style="height:400px; border: 1px solid #fff; background:blue">
</div>
<div class="col-xs-12" style="height:200px; border: 1px solid #fff; background:blue">
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-12" style="height:200px; border: 1px solid #fff; background:green">
</div>
<div class="col-xs-12" style="height:200px; border: 1px solid #fff; background:green">
</div>
<div class="col-xs-12" style="height:200px; border: 1px solid #fff; background:green">
</div>
</div>
</div>
</div>
</body>这里还有一个小摆设：https://jsfiddle.net/Lp9e327s/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33462014
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号