Question

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

现在我遇到的问题是当＆＃34;显示更多＆＃34;使用该选项时，该图块的内容会扩展，从而将其下方的图块向下推。但是，它也会扩展所有其他列的切片。如何防止其他列瓷砖扩大其尺寸？

我只希望该列向下扩展，其中一个磁贴＆＃34;＆＃34;显示更多＆＃34;选项已被点击。

普通视图 normal view

点击＆＃34;显示更多＆＃34; after clicking "show more"

Answer 1

好的，那么你的bootstrap布局可能不正确。这个结构应该有效：

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

＆＃34;显示更多＆＃34; bootstrap列中的选项会扩展所有相邻列

1 个答案: