Отключить перенос столбцов в Bootstrap 4 - PullRequest
Новая
       15

Отключить перенос столбцов в Bootstrap 4

0 голосов
/ 28 февраля 2019

В настоящее время я сталкиваюсь со следующей ситуацией: 

<div class="row no-gutters">
    <div class="col"></div>
    <div class="col col-auto"></div>
</div>

Итак, первый столбец будет занимать доступное пространство, которое не заполняется вторым столбцом

т.е. [|-------- column1 -------- || Column2 |]

Моя проблема заключается в том, что содержимое внутри column1 имеет ширину больше, чем содержащая строка.Что происходит, вместо того, чтобы column1 сжиматься, чтобы уместить все столбцы в одной строке строки, column1 заполняет всю строку, как если бы это было col-12, а column2 опускается до новой строки, следовательно, оборачивая столбцы.

Есть ли способ предотвратить такое поведение и всегда держать оба столбца в одной строке?

1 Ответ

0 голосов
/ 28 февраля 2019

Обычно класс flex-nowrap может использоваться в строке для предотвращения переноса столбцов в Bootstrap 4. В этом случае он не будет работать из-за большого содержания многоточия в столбце.

Из-закак рассчитывается ширина flexbox (объяснено здесь и здесь ), вы должны установить width, min-width или max-width ( любая ширина ) в столбце flex-grow:1 (col).

Например, установите width:0 в col ... 

<div class="row no-gutters">
    <div class="col">
        <h4 class="ellipsis">aaaaaa..</h4>
    </div>
    <div class="col-auto d-flex align-items-center">
        something
    </div>
</div>

.col {
  width: 0;
}

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

Кроме того, не используйте одновременно col и col-auto в одном столбце.flex-grow:1 из col, предотвратит сокращение col-auto.

...