Я не уверен, правильное ли слово - перенос, но у меня есть столбец, который может быть очень длинным. И я хотел бы, чтобы он переходил к следующему набору столбцов, когда он достигнет конца 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>
0
Link

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>

Единственный дополнительный CSS - заставить работать max-height быстро. Это позволяет столбцам располагаться вертикально на экранах меньшего размера (ширина md ) ...

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