Question

使用Bootstrap 4 Grid系统，我具有以下结构： https://i.imgur.com/Qa0xXAk.png

我在每一行中都有内容列和两个空白列。有时我需要将CSS样式应用于整行。

<div class="container">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      Lorem ipsum
    </div>
    <div class="col-sm-3"></div>
  </div>

  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      dolor sit amet,
    </div>
    <div class="col-sm-3"></div>
  </div>
  ....
  <div class="row custom-background-color">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      consecteur adipiscing elit,
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

但是同时具有多个重复代码变得不方便。我想重新组织代码，以仅具有一次列定义。

<div class="container">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <div class="row">Lorem ipsum</div>
      <div class="row">dolor sit amet,</div>
      ...
      <div class="row custom-background-color">consecteur adipiscing elit,</div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

我希望CSS样式不是针对一列，而是针对整个页面宽度。有可能采取解决方法或找到解决问题的方法吗？

Answer 1

是的，如果每一列中的行数相同，则是可能的。然后，您可以使用nth-child selector将样式传递到例如每列的第五行。

\\?\UNC\\

div[class^="col"] .row:nth-child(2) {
    background: green;
}

是否可以将CSS样式应用于列中的整个行？

1 个答案: