Question

我正在尝试使引导列更改顺序，因此它们交替的每隔一行。如果它是一个平面网站但我正在使用WP循环，那么这很容易做到，因此需要使用CSS定位每个其他列集。

我目前的代码如下，但这似乎是针对每个.odd元素，而不仅仅是每个其他元素。我试过孩子和打字。

HTML

<div class="alternate">
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd"><?php echo $content; ?></div>
                    <div class="col-4 even"><img src="<?php echo $image ?>" /></div>
                </div>
          </div>
        </div>
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd"><?php echo $content; ?></div>
                    <div class="col-4 even"><img src="<?php echo $image ?>" /></div>
                </div>
          </div>
        </div>
</div>

CSS

.alternate .odd:nth-of-type(odd){
    order: 1;
}

当然上面的代码只显示了一个'奇数'但是jumbotron部分重复了很多次（我刚刚删除了PHP）。

有人能看出什么问题吗？我认为这可能是一个嵌套问题？

Answer 1

在nth-child(odd)上使用jumbotron，然后选择col-8来替换列。

＆＃13;

.jumbotron:nth-child(odd) .col-8 {
  order: 1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="alternate">
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8 ">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col-8 ">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis molestias numquam, culpa, ullam sed quia facilis debitis fuga dolore obcaecati tenetur asperiores? Aspernatur, fugit veritatis? Fugit ex aspernatur velit dolorem?
          </p>
        </div>
        <div class="col-4"><img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/1/19/XA-UHZ_%286908943182%29.jpg" /></div>
      </div>
    </div>
  </div>
</div>

＆＃13;

全屏查看代码段。

Answer 2

＆＃13;

.alternate .jumbotron:nth-child(odd) .odd {
border: 1px solid red;
}

＆＃13;

<div class="alternate">
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd">odd</div>
                    <div class="col-4 even">test</div>
                </div>
          </div>
        </div>
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd">odd</div>
                    <div class="col-4 even">test</div>
                </div>
          </div>
        </div>
         <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <div class="services-content row">
                    <div class="col-8 odd">odd</div>
                    <div class="col-4 even">test</div>
                </div>
          </div>
        </div>
</div>

＆＃13;

使用nth-of-type交替行bootstrap

2 个答案: