Как сделать 5 колонок разной ширины в Bootstrap 4?

Question

[jwwwe]

Доброго времени суток. Можно ли сделать 5 колонок стандартными средствами? Скомпилировать новую сетку не вариант тк весь макет уже сверстан на 12ти колоночной сетке. Нужна одна строка с 5 разными колонками.

Comments

[Иван]

Что?

Answer 1

[Pavel Shvedov]

если в тупую то:

<div class="row">
  <div class="col-md-3">1</div>
  <div class="col-md-3">2</div>
  <div class="col-md-3">3</div>
  <div class="col-md-3">
    <div class="row">
      <div class="col-md-6">4</div>
      <div class="col-md-6">5</div>
    </div>
  </div>
</div>

Answer 2

[Павел]

Bootrastrap 3:
В Css:

.col-xs-5bl,
.col-sm-5bl,
.col-md-5bl,
.col-lg-5bl {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5bl {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5bl {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5bl {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5bl {
        width: 20%;
        float: left;
    }  
}

Html:

<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>

И также добавляете классы бутстрапа если надо по колонкам

Bootstrap 4:

<div class="row">
   <div class="col">
      1
   </div>
   <div class="col">
     2
   </div>
   <div class="col">
      3
   </div>
   <div class="col">
      4
   </div>
   <div class="col">
      5
   </div>
</div>

Answer 3

[Сергей]

Нужна одна строка с 5 разными колонками

C разными, значит разной ширины? Так в чем проблема? Вот, к примеру:

<div class="row">
   <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">1</div>
   <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">2</div>
   <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">3</div>
   <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">4</div>
   <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">5</div>
</div>

При этом ничего не мешает сделать свой класс для "колонки" и прописать для него ширину в % в css

Comments

[jwwwe]

<div class="row">
  <div class="col-md-3">1</div>
  <div class="col-md-3">2</div>
  <div class="col-md-3">3</div>
  <div class="col-md-?">4</div>
  <div class="col-md-?">5</div>
</div>
Последние две нужны равной ширины.

[Pavel Shvedov]

jwwwe, 3 + 3 + 3 + X + X = 12; вас в школе не учили решать простые уравнения?

[jwwwe]

Pavel Shvedov,Остается 3 ячейки свободных. Вас в школе не учили, что 3 не делится на 2?

[Danil Sapegin]

jwwwe,
2
4
2
2
2

2
3
3
2
2

может что-то из таких комбинаций?

[Pavel Shvedov]

jwwwe, странная у вас школа, нам говорили, что 3 / 2 = 1.5

[Сергей]

jwwwe,

Последние две нужны равной ширины.

В моем примере, в ответе, последние две - равной ширины.

[Максим Тимофеев]

В bootstrap4 нет col-xs

Answer 4

[Андрей]

Можно ли сделать 5 колонок стандартными средствами?

Нельзя.

Comments

[Максим Тимофеев]

Как так то? Почему это?

<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Не феншуй?

[Андрей]

В одном из комментов автор хотел невозможного