Question

我正在尝试创建一个包含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>

（忽略类的类名，因为我正在使用react）

和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

Answer 1

您不应在计算中除以边距。它应该在外面，否则您将删除的数量少于为每个元素设置的边距。您要设置X的边距，并且只删除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>

您应该对所有其他类应用相同的逻辑

Answer 2

以您的代码笔示例为例，您正在设置InitializeComponent()。

margin-right

取消此操作后，您将看到所述的四列。

以后请在您的问题中包括所有相关代码。

Answer 3

您也可以将React Strap库用于此任务

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

尝试创建包含4个单元格的行

3 个答案: