Bootstrap: Укажите размер столбца на родительский элемент

Question

Обычно с Bootstrap, необходимо указать размер столбца в <div> на сам элемент, например, так:

<div id="attribute-value-container"> 
    <div class="row"> 
     <div class="col-sm-4"> 
      Attribute 1 
     </div> 
     <div class="col-sm-8"> 
      Value 1 
     </div> 
    </div> 
    <!-- Multiple additional rows of attribute-value pairs --> 
</div> 

Но, например, при создании формы с несколькими рядами аналогично стилизованных пар атрибут-значение, было бы полезно указать это на родительский элемент, например, так:

<div id="attribute-value-container" class="first-col-sm-4 second-col-sm-8"> 
    <div class="row"> 
     <div> 
      Attribute 1 
     </div> 
     <div> 
      Value 1 
     </div> 
    </div> 
    <!-- Multiple additional rows of attribute-value pairs --> 
</div> 

... возможно, с некоторыми классами на div, которые с должен получать стили.

Другой способ сделать это - использовать первую строку в качестве шаблона и применить этот стиль к последующим строкам.

Я предполагаю, что это не часть основного CSS-кода Bootstrap. Есть ли доступная библиотека дополнительных сторон CSS? И было ли это предложено для будущих версий Bootstrap (я добавил его непосредственно сейчас в issue tracker)? Приветствуются указатели на соответствующие библиотеки/документацию/дискуссию.

(я предполагаю, что это, должно быть, было поднято другими людьми, чем я, но я не нашел какую-либо темы. Я предполагаю, что я пропускаю правильное ключевое слово или термин. Извините, если это дубликат.)

Answer 1

Bootstrap работает с предопределенными классами, вы должны использовать эти классы по назначению.

На моем текущем шаблоне, у меня есть 11 пар атрибут-значение, так что я бы сэкономить 20 ((11-1) * 2) классы, если я мог бы указать это на родителей или элемента шаблона. Это улучшит краткость (и, на мой взгляд, разборчивость ) и уменьшит место для ошибок.

Bootstrap 4 построен с Sass, поэтому вы можете скомпилировать свою версию, которая лучше подходит для вашей ситуации. Из documentation:

Чтобы использовать наш Gruntfile и запустить нашу документацию локально, вам понадобится копия исходных файлов Bootstrap в, Node и Грант. Выполните следующие шаги, и вы должны быть готовы к скале:

1. Загрузите и установите узел, который мы используем для управления нашими зависимостями.
2. Установите инструменты командной строки Grunt, grunt-cli, с установкой npm -g grunt-cli.
3. Перейдите в каталог root/bootstrap и запустите npm install для установки наших локальных зависимостей, перечисленных в package.json.
4. Установите Ruby, установите Bundler с комплектом установки gem и, наконец, запустите установку пакета. Это установит все зависимости Ruby, такие как Jekyll и плагины.

По завершении работы вы сможете запускать различные команды Grunt из командной строки.

Для вашей ситуации вы можете использовать Sass @extend или миксеры Bootstrap.

Sass @extend См http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend.

Sass код:

.attribute-value-container { 
    @extend .container; 
    > div { 
    @extend .row; 
    > div:first-child { 
     @extend .col-sm-4; 
    } 
    > div:last-child { 
     @extend .col-sm-8; 
    } 
    } 
} 

Теперь вы можете использовать HTML только с 1 attribute-value-container класс:

<div class="attribute-value-container"> 
    <div> 
     <div> 
      Attribute 1 
     </div> 
     <div> 
      Value 1 
     </div> 
    </div> 
    <!-- Multiple additional rows of attribute-value pairs --> 
</div> 

В приведенном выше вас HTML код меньше, но ваш CSS становится больше. Расширение добавляет селектор в скомпилированный CSS-код.

Составленный CSS код для .row с будет выглядеть, как показано ниже в настоящее время:

.row, .attribute-value-container > div { 
    margin-left: -0.9375rem; 
    margin-right: -0.9375rem; } 
    .row::after, .attribute-value-container > div::after { 
    content: ""; 
    display: table; 
    clear: both; } 

В качестве альтернативы вы можете использовать сетку Примеси Bootstrap, см также http://v4-alpha.getbootstrap.com/layout/grid/#sass-mixins:

Sass код:

.attribute-value-container { 
    @include make-container(); 
    > div { 
    @include make-row(); 
    @include media-breakpoint-up(sm) { 

     > div { 
     @include make-col(); 
     } 

     > div:first-child { 
     @include make-col-span(4); 
     } 

     > div:last-child { 
     @include make-col-span(8); 
     } 
    } 
    } 
} 

Вышеприведенное компилируется в код CSS следующим образом:

.attribute-value-container { 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 0.9375rem; 
    padding-right: 0.9375rem; } 
    .attribute-value-container::after { 
    content: ""; 
    display: table; 
    clear: both; } 
    .attribute-value-container > div { 
    margin-left: -0.9375rem; 
    margin-right: -0.9375rem; } 
    .attribute-value-container > div::after { 
     content: ""; 
     display: table; 
     clear: both; } 
    .attribute-value-container > div > div { 
     position: relative; 
     float: left; 
     min-height: 1px; 
     padding-left: 0.9375rem; 
     padding-right: 0.9375rem; } 
    @media (min-width: 544px) { 
     .attribute-value-container > div > div:first-child { 
     width: 33.33333%; } 
     .attribute-value-container > div > div:last-child { 
     width: 66.66667%; } } 

Вы можете применить вышеуказанный CSS-код к тому же HTML, что и для первого решения.

Использование Примеси, как описаны выше, также делает ваш код CSS больше, но вы можете скомпилировать без предопределенных классов сетки для ситуаций, вы только используете Примесь для сеток:

Sass:

$enable-grid-classes: false; 
@import "bootstrap.scss"; 

Answer 2

Это не то, что действительно будет реализовано при загрузке, так как оно может доходить до N столбцов. Каждая строка указана так, как она может отличаться для каждой. Если вы хотите что-то за пределами этого леса, достаточно легко сделать это, используя немного CSS и nth-child.

Пример: https://jsfiddle.net/54ko3Le6/1/

HTML:

<div id="attribute-value-container" class="cols"> 
     <div> 
      Attribute 1 
     </div> 
     <div> 
      Value 1 
     </div> 
     <div> 
      Attribute 2 
     </div> 
     <div> 
      Value 2 
     </div> 
    <!-- Multiple additional rows of attribute-value pairs --> 
</div> 

CSS:

.cols { 
    width:100%; 
} 

.cols > div:nth-child(even) { 
    width:67%; 
    float:right; 
    background-color:red; 
} 

.cols > div:nth-child(odd) { 
    width:33%; 
    float:left; 
    background-color:green; 
} 

Результат: