html - 如果内容太长，Bootstrap 列换行

Question

我不确定 wrap 这个词是否正确，但我的专栏可能会很长。当它到达 div 的末尾时，我希望它换行到下一组列。

我想要什么:

col-3 col-3 a
a     a     a
a     a     a 
a     a     col-3
a     a     a
______________ end of div

我希望第二个 col-3 以第一个 col-3 的大小换行，最后有 2 列大小相同，其中一列包含填充长度后剩下的内容。

我现在拥有的:

col-3 col-3 col-3
a     a     a
a     a     
a     a     
a     a 
      a
      a
      a
      a    
______________ end of div

我的代码:

<div className="container">
      <h2>{listing.name}</h2>
      <div className="row">
        <div className="col-md-6">
          <SlickAll />
            <ul>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
            </ul>


        </div>
        <div className="col-md-3 mh-100">
          <ul className="list-group">
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
          </ul>
        </div>

        <div className="col-md-3 mh-100">
          <ul className="list-group">
             <li>asd </li>
          </ul>
        </div>
      </div>
    </div>

Answer 1

您可以使用 flexbox 列换行，并通过将它们放置在 position:absolute 容器中来限制右侧列的高度...

   <div class="row my-3 mx-auto">
        <div class="col-md-6">
            <ul class="list-group">
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                ...
            </ul>
        </div>
        <div class="col-md">
            <div class="position-absolute w-100 h-100">
                <ul class="list-group d-flex flex-column flex-wrap mh-md-100">
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                    ...
                    <li>listend</li>
                </ul>
            </div>
        </div>
    </div>

https://www.codeply.com/go/L7WH4YZNBW

唯一额外的 CSS 是使 max-height 响应式工作。这允许列在较小的屏幕上垂直堆叠(小于 md 宽度)...

@media (min-width: 768px) {
    .mh-md-100 {
        max-height: 100%;
    }
}