时间戳

首页 > 解决方案 > 在同一个 div 中组合 row 和 col 是否被认为是一种不好的做法？

twitter-bootstrap - 在同一个 div 中组合 row 和 col 是否被认为是一种不好的做法？

问题描述

正如标题已经说过的那样，将 row 和 col 组合在同一个 div 中是否不好被认为是一种不好的做法，副作用是什么？

<div class="row col">
  ...
</div>

标签： twitter-bootstrapbootstrap-4

解决方案

这些是col&row基于 Bootstrap 样式表的规范。

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.col {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

如果您观察这些组合，则 flex 项目似乎并没有太大变化，除了 parent 引入的填充col。我不建议这样做，因为它没有记录在 Bootstrap 的网格系统中，但归根结底，这些只是最终可以被覆盖的 CSS 类。

div {
  border: 2px solid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="row col">
  <div class="col">flex item 1</div>
  <div class="col">flex item 2</div>
</div>

<div class="row">
  <div class="col">flex item 1</div>
  <div class="col">flex item 2</div>
</div>

推荐阅读