时间戳

首页 > 解决方案 > 有没有办法使用引导程序 4 做到这一点？

css - 有没有办法使用引导程序 4 做到这一点？

问题描述

我目前有这样的东西https://jsfiddle.net/qjs5vzL2/32/。如果显示小于 md 卡片，我希望它显示在它对应的按钮的正下方而不是页面底部。有没有办法使用引导程序 4 做到这一点。

我的代码看起来像

<div class="row">
    <div class="col-md-3"><a>Foo</a></div>
    <div class="col-md-3"><a>Bar</a></div>
    <div class="col-md-3"><a>Foobar</a></div>
    <div class="col-md-3"><a>Barfoo</a></div>
</div>

<div>
    My Content
</div>

像这样： 小于 md 的屏幕所需的布局

标签： cssbootstrap-4

解决方案

是的，您可以为此使用 CSSorder属性，但所有框都应具有相同的第一个父项。为此，您可以将您的卡带入链接行，并在小屏幕中将其指定为 2。

您可以使用以下代码更新您的 HTML

<div class="container my-4">
  <div class="row">
    <div class="col-md-3 nav-button text-center selected"><a href="">Events</a></div>
    <div class="col-md-3 nav-button text-center"><a href="">Foo</a></div>
    <div class="col-md-3 nav-button text-center"><a href="">Bar</a></div>
    <div class="col-md-3 nav-button text-center"><a href="">Profile</a></div>
    <div class="col-12 mt-3">
      <div class="card">
        <div class="card-header">
          <h1>
            My Events
          </h1>
        </div>
        <div class="card-body">
          ...
        </div>
      </div>
    </div>
  </div>
</div>

并使用以下代码更新您的 CSS


.nav-button {
  border: 1px solid black;
}

.nav-button.selected {
  background-color: red;
  color: black !important;
}

a {
  color: inherit;
}

@media (max-width: 992px){
  .container .row > div:first-of-type{
    order: 1;
  }
  .container .row > div:nth-of-type(2){
    order: 3;
  }
  .container .row > div:nth-of-type(3){
    order: 4;
  }
  .container .row > div:nth-of-type(4){
    order: 5;
  }
  .container .row > div:nth-of-type(5){
    order: 2;
  }
}

推荐阅读