Bootstrap展开/折叠不会将内容压低

时间:2018-07-16 18:48:08

标签: twitter-bootstrap push collapse expand

尝试使用(伪)引导程序代码创建类似此链接(gallery)的图库。使用引导程序时,展开的内容仅显示在列中,而不显示在整个屏幕宽度中。

我创建了一个jsfiddle来模仿我当前发布的扩展内容覆盖问题,而不是将所有内容下推并扩展紫色父级div。我希望它可以显示样式,还可以推送内容和紫色div。

<li>
                    <div data-toggle="collapse" href="#l1" aria-expanded="false" alt="img01" >
                            <img class="img-sm" src="https://pics.me.me/all-your-base-are-belong-to-us-troll-me-1998-19342770.png"/>
                        </div>
                        <div id="l1"  class="collapse in panel-body">
                                    <span class="og-close"></span>
                                    <div class="image"><img src="https://i.kym-cdn.com/photos/images/facebook/001/217/729/f9a.jpg"></div>
                                    <div class="data">
                                        <h2>Lorem ipsum</h2>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum fringilla placerat. Vivamus eget eros nec nibh euismod lobortis. Etiam id lacus convallis magna tempus molestie nec sed libero. Aliquam elementum sem id lectus dignissim vestibulum. Quisque eget lobortis sem. Praesent metus metus, dapibus ut laoreet id, ornare in ligula. Donec et urna lectus. Aliquam sagittis eleifend placerat. Aliquam mollis vitae ante ac lobortis. Aenean pellentesque dolor odio, ut volutpat sem suscipit quis. Nunc quis commodo lacus. Integer maximus non lectus nec commodo. Proin cursus, lorem non volutpat iaculis, nisi nisi pretium dolor, eget elementum sem orci eu nisl. Integer maximus, tellus eget maximus scelerisque, tortor lorem vehicula urna, nec sollicitudin ante ligula et nisl.</p>
                            </div>
                        </div>
                </li>

        .panel-body {
        position: absolute;
        top: auto;
        left: 0;
        width: 100%;
        margin-top: 0px;
        text-align: left;
        height: 100%!important;
        overflow: hidden;
        transition: all .3s linear;
        background: -moz-linear-gradient(left, rgba(255,255,255,0.55) 27%, rgba(255,255,255,0.55) 35%, rgba(255,255,255,0.19) 89%, rgba(255,255,255,0.19) 100%); 
        background: -webkit-linear-gradient(left, rgba(255,255,255,0.55) 27%,rgba(255,255,255,0.55) 35%,rgba(255,255,255,0.19) 89%,rgba(255,255,255,0.19) 100%); 
        background: linear-gradient(to right, rgba(255,255,255,0.55) 27%,rgba(255,255,255,0.55) 35%,rgba(255,255,255,0.19) 89%,rgba(255,255,255,0.19) 100%); 
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cffffff', endColorstr='#30ffffff',GradientType=1 ); 
            }

JSFiddle

0 个答案:

没有答案