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

Question

使用Bootstrap4网格系统，我有如下结构： 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 将样式传递给 e.G.每列第五行。

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-3">
     <div class="row">ipsum</div>
      <div class="row"> amet,</div>
      <div class="row"> elit,</div>
    </div>
    <div class="col-sm-6">
      <div class="row">Lorem ipsum</div>
      <div class="row">dolor sit amet,</div>
      <div class="row">consecteur adipiscing elit,</div>
    </div>
    <div class="col-sm-3">
     <div class="row">Lorem ipsum</div>
      <div class="row">dolor</div>
      <div class="row">consecteur</div></div>
  </div>
</div>

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

Is it possible to apply CSS style to the whole row inside column?

css

grid-layout

bootstrap-4