时间戳

首页 > 解决方案 > 是否可以将 CSS 样式应用于列内的整行？

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

问题描述

使用 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 样式不是针对一列，而是针对整个页面宽度。是否可以制定解决方法或找到解决问题的解决方案？

标签： cssbootstrap-4grid-layout

解决方案

是的，如果每列中的行数相同，这是可能的。然后，您可以使用nth-child选择器将样式传递给 eG 每列的第五行。

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>

推荐阅读