引导列中的“显示更多”选项扩展所有相邻列答案

【问题标题】："show more" option in bootstrap column expands all adjacent columns引导列中的“显示更多”选项扩展所有相邻列
【发布时间】：2015-11-02 03:41:04
【问题描述】：

我正在使用 Bootstrap 开发一个网站。桌面布局每行有 4 列（网格图块，如布局）。每个图块都有一些冗长的文本，我使用 jQuery 插件设法将它们折叠起来。

现在我面临的问题是，当使用“显示更多”选项时，该图块的内容会扩展，从而将其下方的图块向下推。但是，它也扩展了所有其他列的图块。如何防止其他列图块扩大其大小？

我只希望该列向下扩展，其中单击了磁贴的“显示更多”选项。

普通视图 normal view

点击“显示更多”后 after clicking "show more"

【问题讨论】：

这是我用的jQuery plugin
这就是 Bootstrap 的工作原理。它与您的插件无关。当您展开一列时 - 整行更高。
澄清一下：您只希望左侧的磁贴（单击“显示更多”的位置）展开，但您希望右侧的部分保持其高度？
喜欢这个？ oi64.tinypic.com/14ceib7.jpg
@S.F.是的，这就是我想要的方式

标签： jquery html css twitter-bootstrap

【解决方案1】：

好的，那么您的引导程序布局可能不正确。这种结构应该可以工作：

<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>

这里也是一个 jsfiddle： https://jsfiddle.net/Lp9e327s/

【讨论】：

@johnwick：上面的解决方案对你有用吗？如果是，你能接受吗？干杯:)