Могу ли я дать col-md-1.5 в начальной загрузке?

Question 1

Я хочу настроить столбцы в Twitter Boοtstrap.

Я знаю, что в бутстрапе есть сетка из 12 столбцов. Есть ли способ манипулировать сетками, чтобы было 1.5 3.5 3.5 3.5 вместо 3 3 3 3?

Question 2

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

Question 3

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

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

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

in bootstrap 4вам также придется переопределить свойства flex и max-width:

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

Question 4

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

Question 5

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

Question 6

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

Question 7

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

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

Question 8

Согласно ответу Рекса Блума, я написал помощника по начальной загрузке:

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

Question 9

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

Question 10

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

Question 11

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

Question 12

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

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

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

Answer 1

85

Я хочу настроить столбцы в Twitter Boοtstrap.

Я знаю, что в бутстрапе есть сетка из 12 столбцов. Есть ли способ манипулировать сетками, чтобы было 1.5 3.5 3.5 3.5 вместо 3 3 3 3?

html twitter-bootstrap Сандхья Гор
источник

1

Как правильно сказал @ bodi0, это невозможно. Вам нужно либо расширить сеточную систему Bootstrap (вы можете искать и находить различные решения), либо использовать вложенные строки, например bootply.com/dd50he9tGe . В случае вложенных строк вы можете получить не всегда точный результат, а похожий.

Тасос К.

@TasosK. ваш пример сработал для меня, вы можете написать его в ответе, я приму его. Спасибо

Сандхья Гор

Приятно, я опубликовал ответ

Тасос К.

Если вы используете v4, проверьте это - stackoverflow.com/a/46838552/4050261

Адарш Мадреча

Answer 2

1

Как правильно сказал @ bodi0, это невозможно. Вам нужно либо расширить сеточную систему Bootstrap (вы можете искать и находить различные решения), либо использовать вложенные строки, например bootply.com/dd50he9tGe . В случае вложенных строк вы можете получить не всегда точный результат, а похожий.

Тасос К.

Answer 3

@TasosK. ваш пример сработал для меня, вы можете написать его в ответе, я приму его. Спасибо

Сандхья Гор

Answer 4

Приятно, я опубликовал ответ

Тасос К.

Answer 5

Если вы используете v4, проверьте это - stackoverflow.com/a/46838552/4050261

Адарш Мадреча

Answer 6

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

Answer 7

91

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

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

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

in bootstrap 4вам также придется переопределить свойства flex и max-width:

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

Балрадж Бейнс
источник

Великолепно работает отлично, сэкономил мне часы. все еще сохраняет свою отзывчивость

defcde 05

1

но ml-sm-autoкласс по-прежнему будет игнорировать это настраиваемое значение ширины: / (так что отзывчивость страницы

нарушится

3

Хорошо, но почему вы просто не использовали 12,5, ведь это точный результат? :)

Андрей

Answer 8

Великолепно работает отлично, сэкономил мне часы. все еще сохраняет свою отзывчивость

defcde 05

Answer 9

1

но ml-sm-autoкласс по-прежнему будет игнорировать это настраиваемое значение ширины: / (так что отзывчивость страницы

нарушится

Answer 10

3

Хорошо, но почему вы просто не использовали 12,5, ведь это точный результат? :)

Андрей

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

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

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

Answer 15

Согласно ответу Рекса Блума, я написал помощника по начальной загрузке:

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

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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

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

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

Могу ли я дать col-md-1.5 в начальной загрузке?

Ответы: