Используйте сетку «Контент переменной ширины» в Bootstrap 3 - PullRequest
Новая
       20

Используйте сетку «Контент переменной ширины» в Bootstrap 3

0 голосов
/ 28 мая 2018

В настоящее время я использую Bootstrap 3.3.7, и поскольку мой сайт огромен, перейти на v4 нелегко.Тем не менее, я бы хотел использовать новую функцию Auto-Layout-columns (содержимое переменной ширины) (см. Скриншот ниже).

Кто-нибудь есть идея для обхода проблемы?

bootstrap v4 doc screenshot

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-xs-push-3 col-md-3">Fixed 250px</div>
      <div class="col-xs-6 col-xs-pull-3 col-md-3">Auto</div>
      <div class="col-xs-6 col-md-3">Auto</div>
      <div class="col-xs-6 col-md-3">Auto</div>
    </div>   
</div>

1 Ответ

0 голосов
/ 28 мая 2018

Вы можете добавить CSS-код flexbox, который заставляет колонки автоматического размещения работать в Bootstrap 4 ...

CSS: 

.d-flex {
    display:flex;
}
.d-flex>div {
    float: none;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

Использование: 

<div class="container">
    <div class="row d-flex">
        <div class="col-sm-3 bg-success">col-sm-3</div>
        <div class="col-auto">col-auto</div>
        <div class="col-sm-9 bg-success">col-sm-3</div>
    </div>
</div>

Демонстрация:
https://www.codeply.com/go/cTTtpuItaM

Похожие: Bootstrap 3.0 -Жидкостная сетка, включающая фиксированные размеры столбцов

...