Чи можу я надати col-md-1.5 у завантажувальному рейки?

Я хочу налаштувати стовпці в Twitter Boοtstrap.

Я знаю, що в bootstrap є сітка з 12 стовпців. Чи є спосіб маніпулювати сітками, щоб мати 1,5 3,5 3,5 3,5 замість 3 3 3 3?

Як правильно сказав @ bodi0 , це неможливо. Ви або повинні розподілити сіткову систему Bootstrap (ви можете шукати та знаходити різні рішення, ось приклад із 7 стовпців), або використовувати вкладені рядки, наприклад http://bootply.com/dd50he9tGe .

У випадку вкладених рядків ви не завжди можете отримати точний результат, але подібний

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Ви хмара також просто перевизначаєте ширину стовпця ...

<div class="col-md-1" style="width: 12.499999995%"></div>

Оскільки col-md-1ширина 8,33333333%; просто помножте 8,33333333 * 1,5 і встановіть його як свою ширину.

в bootstrap 4, вам також доведеться перевизначити властивість flex та max-width:

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

Коротка відповідь - ні (технічно ви можете вказати будь-яку назву класу, який хочете, але це не матиме жодного ефекту, якщо ви не визначите свій власний клас CSS - і пам’ятаєте - без крапок у селекторі класу). Довга відповідь знову " ні" , оскільки Bootstrap включає гнучку, мобільну першу рідинну сітку, яка відповідно масштабує до 12 стовпців у міру збільшення розміру пристрою або порту перегляду.

Рядки повинні розміщуватися в межах .container(фіксована ширина) або .container-fluid(повна ширина) для належного вирівнювання та заповнення.

• Використовуйте рядки для створення горизонтальних груп стовпців.
• Вміст слід розміщувати всередині стовпців, і лише стовпці можуть бути безпосередніми нащадками рядків.
• Заздалегідь визначені класи сітки подобаються .rowта .col-xs-4доступні для швидкого створення макетів сітки. Менше міксинів також можна використовувати для більш семантичних макетів.
• Стовпці створюють жолоби (проміжки між вмістом стовпців) за допомогою заповнення. Це відступ зміщується в рядках для першого та останнього стовпців через від’ємне поле .rows.
• Стовпці сітки створюються шляхом зазначення кількості дванадцяти доступних стовпців, які ви хочете охопити. Наприклад, три рівні стовпці використовуватимуть три .col-xs-4.
• Якщо в одному рядку розміщено більше 12 стовпців, кожна група додаткових стовпців, як одна одиниця, перенесеться на новий рядок.
• Класи сітки застосовуються до пристроїв із шириною екрану, що перевищує або дорівнює розмірам точки зупинку, і замінюють класи сітки, орієнтовані на менші пристрої. Отже, наприклад, застосування будь-якого .col-md-*класу до елемента вплине не тільки на його стиль на середніх пристроях, а й на великих пристроях, якщо .col-lg-*класу немає.

Можливим рішенням вашої проблеми є визначення власного класу CSS із бажаною шириною , скажімо, .col-half{width:XXXem !important}тоді додайте цей клас до елементів, які ви хочете, разом із оригінальними класами CSS Bootstrap.

Bootstrap 4 використовує flex-box, і ви можете створювати власні визначення стовпців

Це близько до 1,5, налаштування для власних потреб.

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Створіть нові класи для перезапису ширини. Див. JFiddle щодо робочого коду.

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

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Як і інші згадані в Bootstrap 3, ви можете використовувати техніку вкладання / вбудовування.

Однак зараз стає більш очевидним використовувати досить дивовижну функцію з Bootstrap 4. у вас просто є можливість використовувати col-{breakpoint}-autoкласи (наприклад col-md-auto) для автоматичного встановлення розміру стовпців на основі природної ширини його вмісту. перевірте це, наприклад

Відповідно до відповіді Рекса Блума, я написав помічник завантажувача:

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

Bootstrap має зміщення стовпців, тому якщо ви хочете стовпці з однаковою шириною, не вказуючи розмір, використовуйте це.

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

Також перевірте це посилання https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

Це не Bootstrap Standard, щоб дати col-md-1.5, і ви не можете редагувати bootstrap.min.css, оскільки це неправильний спосіб. Ви можете створити так http://www.bootply.com/125259

ви можете використовувати цей код всередині col-md-3, col-md-9

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

Це питання досить давнє, але я зробив його таким (у TYPO3).

По-перше, я створив власний доступний клас css, який я можу вибрати для кожного елемента вмісту вручну.

Потім я створив зовнішній елемент із трьох стовпців з 11 стовпцями (1 - 9 - 1), нарешті, я змінив ширину стовпця першого та третього стовпця за допомогою CSS до 12,499999995%.