Question

当显示从第一行（1,2,3）崩溃时，它会将其他几张纸牌移至所显示纸牌的末尾。为什么会发生这种情况，有没有办法防止这种情况发生？

我希望垂直小组（1＆4、2＆5、3＆6）独立行动。例如，当显示崩溃1，崩溃2和崩溃3时，它们应保持默认的“开始位置”。

https://www.codeply.com/p/KDvhVI3QAM

CSS：


        .vertical-group {
            display:inline-block;
            width: 33%;
        }

        a{text-decoration: none!important;}

html：

<span class='vertical-group'>

    <div class='col-12 ' >
        <div class='card'>
            <div class='card-header'>
                  <a data-toggle='collapse' href='#collapseExample' role='button' aria-expanded='false' aria-controls='collapseExample'>Collapse1
                  </a>
            </div>
            <div class='collapse' id='collapseExample'>  
                <div class='card-body '>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur est eros, at cursus mauris molestie non. Nullam suscipit leo in volutpat eleifend. Mauris non mauris mauris. Nunc interdum lectus ipsum, vel scelerisque orci condimentum non. Integer pellentesque molestie posuere. Integer et placerat sapien. Quisque porttitor pretium mattis. Proin pretium fringilla velit, ac suscipit nisi maximus id. Mauris eget risus et quam maximus maximus a quis quam. Vestibulum lacinia nunc quis neque vulputate, at pretium augue sodales. Maecenas pulvinar diam arcu, id porta dui congue vehicula. In rhoncus ex in nunc rhoncus, nec semper orci consequat. Sed vitae metus nec erat rhoncus viverra. Aliquam vitae ex metus. Duis vehicula leo enim, a dictum justo condimentum quis. </p>
                </div>
            </div>
        </div>
    </div>
    
        <div class='col-12 '>
        <div class='card '>
            <div class='card-header'>
                  <a data-toggle='collapse' href='#collapseExample4' role='button' aria-expanded='false' aria-controls='collapseExample4'>Collapse4
                  </a>
            </div>
            <div class='collapse' id='collapseExample4'>  
                <div class='card-body '>
                    <p>  Duis vulputate est ut nulla pulvinar viverra. Fusce ultrices orci diam, ac suscipit lectus posuere eu. Proin ut cursus eros. In rhoncus tortor lacus, ac lobortis enim suscipit in. Nunc id consequat neque. In hac habitasse platea dictumst. Vivamus scelerisque orci quis ligula vestibulum ornare. Vestibulum blandit pretium lacus at pulvinar.  </p>
                </div>
            </div>
        </div>
    </div>
    
    </span>
    
    <span class='vertical-group'>
        <div class='col-12 '>
        <div class='card '>
            <div class='card-header'>
                  <a data-toggle='collapse' href='#collapseExample1' role='button' aria-expanded='false' aria-controls='collapseExample1'>Collapse2
                  </a>
            </div>
            <div class='collapse' id='collapseExample1'>  
                <div class='card-body '>
                    <p>  Duis vulputate est ut nulla pulvinar viverra. Fusce ultrices orci diam, ac suscipit lectus posuere eu. Proin ut cursus eros. In rhoncus tortor lacus, ac lobortis enim suscipit in. Nunc id consequat neque. In hac habitasse platea dictumst. Vivamus scelerisque orci quis ligula vestibulum ornare. Vestibulum blandit pretium lacus at pulvinar.  </p>
                </div>
            </div>
        </div>
    </div>
         <div class='col-12 ' >
        <div class='card'>
            <div class='card-header'>
                  <a data-toggle='collapse' href='#collapseExample5' role='button' aria-expanded='false' aria-controls='collapseExample5'>Collapse5
                  </a>
            </div>
            <div class='collapse' id='collapseExample5'>  
                <div class='card-body'>
                    <p> Nunc ornare felis egestas sodales ornare. Mauris auctor suscipit nisi. Vestibulum varius mi cursus, luctus metus in, fringilla odio. In nec pellentesque eros, a pretium ligula. Quisque venenatis convallis ipsum, consequat tristique erat pulvinar nec. Sed ex odio, accumsan sit amet semper sit amet, consequat feugiat nisi. Fusce risus nibh, maximus quis aliquam sollicitudin, rhoncus sit amet enim. Vestibulum luctus elit tincidunt, suscipit enim vel, scelerisque arcu. Nunc bibendum lobortis est, in venenatis erat auctor a. Curabitur ac magna massa. Duis commodo facilisis rhoncus. </p>
                </div>
            </div>
        </div>
    </div>
        </span>

        <span class='vertical-group'>    
        <div class='col-12 ' >
        <div class='card'>
            <div class='card-header'>
                  <a data-toggle='collapse' href='#collapseExample3' role='button' aria-expanded='false' aria-controls='collapseExample3'>Collapse3
                  </a>
            </div>
            <div class='collapse' id='collapseExample3'>  
                <div class='card-body'>
                    <p> Nunc ornare felis egestas sodales ornare. Mauris auctor suscipit nisi. Vestibulum varius mi cursus, luctus metus in, fringilla odio. In nec pellentesque eros, a pretium ligula. Quisque venenatis convallis ipsum, consequat tristique erat pulvinar nec. Sed ex odio, accumsan sit amet semper sit amet, consequat feugiat nisi. Fusce risus nibh, maximus quis aliquam sollicitudin, rhoncus sit amet enim. Vestibulum luctus elit tincidunt, suscipit enim vel, scelerisque arcu. Nunc bibendum lobortis est, in venenatis erat auctor a. Curabitur ac magna massa. Duis commodo facilisis rhoncus. </p>
                </div>
            </div>
        </div>
    </div>
    
        <div class='col-12 ' >
        <div class='card'>
            <div class='card-header'>
                  <a data-toggle='collapse' href='#collapseExample6' role='button' aria-expanded='false' aria-controls='collapseExample6'>Collapse6
                  </a>
            </div>
            <div class='collapse' id='collapseExample6'>  
                <div class='card-body '>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur est eros, at cursus mauris molestie non. Nullam suscipit leo in volutpat eleifend. Mauris non mauris mauris. Nunc interdum lectus ipsum, vel scelerisque orci condimentum non. Integer pellentesque molestie posuere. Integer et placerat sapien. Quisque porttitor pretium mattis. Proin pretium fringilla velit, ac suscipit nisi maximus id. Mauris eget risus et quam maximus maximus a quis quam. Vestibulum lacinia nunc quis neque vulputate, at pretium augue sodales. Maecenas pulvinar diam arcu, id porta dui congue vehicula. In rhoncus ex in nunc rhoncus, nec semper orci consequat. Sed vitae metus nec erat rhoncus viverra. Aliquam vitae ex metus. Duis vehicula leo enim, a dictum justo condimentum quis. </p>
                </div>
            </div>
        </div>
    </div>
        
        </span>

Answer 1

您可以使用flex box来实现：

<div class="vertical-groups">
    <div class="vertical-group">
        <div class="card" />
        <div class="card" />
    </div>
    <div class="vertical-group" />
    <div class="vertical-group" />
</div>

您可以将.vertical-groups设置为弹性框容器：

.vertical-groups {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

align-items: flex-start是确保垂直方向从顶部开始的关键。

演示： https://jsfiddle.net/davidliang2008/07hfmbo5/10/

bootstrap4：网格系统崩溃

1 个答案: