Могу ли я дать col-md-1.5 в bootstrap?

Ответ 1

Как правильно сказал @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>

Ответ 2

Вы облака также просто переопределяют ширину столбца...

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

Так как col-md-1 имеет ширину 8,33333333%; просто умножьте 8.33333333 * 1.5 и установите его как свою ширину.

Ответ 3

Краткий ответ - нет (технически вы можете дать любое имя класса, которое хотите, но это не будет иметь никакого эффекта, если вы не определите свой собственный класс 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} затем добавить этот класс к нужным элементам вместе с оригинальными классами Bootstrap CSS.

Ответ 4

Создайте новые классы для перезаписи ширины. См. 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;
}

Ответ 5

Как упоминалось в Bootstrap 3, вы можете использовать методы nest/embed.

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

Ответ 6

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;
}

Ответ 7

Это не стандарт Bootstrap, чтобы дать col-md-1.5, и вы не можете редактировать bootstrap.min.css, потому что это неправильный путь. вы можете создать такой http://www.bootply.com/125259

Ответ 8

Вы можете использовать этот код внутри 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%;
}

Ответ 9

Этот вопрос довольно старый, но я так и сделал (в TYPO3).

Во-первых, я создал собственный доступный css-класс, который я могу выбрать для каждого элемента контента вручную.

Затем я сделал внешний элемент из трех столбцов с 11 столбцами (1 - 9 - 1), наконец, я изменил ширину столбцов первого и третьего столбцов с помощью CSS до 12.499999995%.