Question

我不确定是否换行是正确的词，但是我有一列可能很长。而且，当到达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%;
    }
}

如果内容太长，Bootstrap列会自动换行

1 个答案: