Попытка создать строку с 4 ячейками - PullRequest
Новая
       5

Попытка создать строку с 4 ячейками

0 голосов
/ 13 января 2019

Я пытаюсь создать строку с 4 ячейками, и я не знаю, почему она не работает.

Я создал родителя row и 4 детей. 

<div className='row'>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
            </div>

(игнорировать className для класса, так как я использую реагировать)

и свойства css: 

[class^="col-"] {
        float: left;
        &:not(:last-child) {
            margin-right: $gutter-horizontal;
        }  
    }

.col-1-of-4 {
    width: calc((100% - #{$gutter-horizontal}) / 4);
}

Что он делает, вычисляет общую ширину, затем вычитает поле и затем делит на 4. Технически это должно работать, и я должен видеть 4 ячейки подряд. Но в результате я получаю 3 ячейки подряд и четвертую ячейку на следующей строке.

результат должен быть примерно таким

hi hi hi hi

но фактический результат -

hi hi hi hi

Вот рабочий код https://codepen.io/sarmad1995/pen/REYXBV?editors=1100

Ответы [ 3 ]

0 голосов
/ 13 января 2019

Вы не должны делить маржу внутри вашего расчета. Он должен быть снаружи, или вы удалите меньше, чем поле, установленное для каждого элемента. Вы устанавливаете X margin и только удаляете X/4, поэтому каждый элемент будет принимать 25% - X/4 + X (последний 25% - X/4) в качестве пробела, таким образом, общая сумма будет 100% + 2X, что больше 100%. 

.col-1-of-4 {
    width: calc(100% / 4  - #{$gutter-horizontal});
}


.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^="col-"] {
  float: left;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
.row .col-1-of-4 {
  width: calc(100%  / 4 - 6rem);
  background-color: red;
}
<div class='row'>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
  hi
  </div>
</div>

А если вам нужно пространство между поведением (что вам нужно), вы можете сделать это следующим образом: 

.col-1-of-4 {
    width: calc(100% / 4  - 3*#{$gutter-horizontal}/4);
}

То, что вы также можете написать так: 

.col-1-of-4 {
     width: calc((100% - 3*#{$gutter-horizontal})/4);
 }

Вам необходимо удалить 3 поля (определенные для первых 3 элементов) из общей ширины, а затем разделить на 4: 

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^="col-"] {
  float: left;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
.row .col-1-of-4 {
  width: calc(100%  / 4 - 3*6rem/4);
  background-color: red;
}
<div class='row'>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
  hi
  </div>
</div>

Вы должны применять ту же логику для всех остальных классов

0 голосов
/ 13 января 2019

Для этой задачи вы также можете использовать библиотеку React Strap

https://reactstrap.github.io/components/layout/

0 голосов
/ 13 января 2019

Глядя на пример кода, вы устанавливаете margin-right. 

[class^="col-"] {
    float: left;
    &:not(:last-child) {
        margin-right: $gutter-horizontal;
    }  
}

Удаление этого дает четыре столбца, как описано.

Пожалуйста, в будущем включите все соответствующие коды к вашему вопросу.

...