我正在尝试使用bootstrap中的row和col-类来对齐卡。前三个工作正常，但第四个没有做我想让它做的事情。有人知道为什么会发生这种情况，也许也有解决方案给我？
The problem in question
这是我的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="form">
        <i class="fa fa-search"></i>
        <input type="text" class="form-control form-input" placeholder="Search anything...">
        <span class="left-pan"><i class="fa fa-microphone"></i></span>
      </div>
    </div>

    <div id="mobile-filter">
      <div>
        <ul>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
        </ul>
        <div>
          <div class="border-bottom"></div>
          <ul class="list-group">
            <label for="customRange1" class="form-label">Price per hour</label>
            <input type="range" class="form-range" id="customRange1">
          </ul>
        </div>
        <div>
          <ul class="list-group">
            <label for="customRange1" class="form-label">Price per hour</label>
            <input type="range" class="form-range" id="customRange1">
          </ul>
        </div>
      </div>
      <div>
      </div>
      <div>
      </div>
    </div>

    <section id="sidebar">
      <div>
        <ul>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
          <li>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
              <label class="form-check-label" for="flexCheckDefault">
                Default checkbox
              </label>
            </div>
          </li>
        </ul>
      </div>

      <div>
        <div class="border-bottom"></div>
        <ul class="list-group">
          <label for="customRange1" class="form-label">Price per hour</label>
          <input type="range" class="form-range" id="customRange1">
        </ul>
      </div>
      <div>
        <ul class="list-group">
          <label for="customRange1" class="form-label">Price per hour</label>
          <input type="range" class="form-range" id="customRange1">
        </ul>
      </div>
    </section>

    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 boat" *ngFor="let boat of boats">
      <div class="card">
        <img src="/{{ boat.src }}" class="card-img-top" alt="{{ boat.name }}">
        <div class="card-body">
          <h5 class="card-title">{{ boat.name }}</h5>
          <p class="card-text">{{ boat.description }}</p>
          <p>{{ boat.city }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

下面是它附带的scss文件：

.form {
  position: relative;
}

.form .fa-search {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #9ca3af;
}

.form span {
  position: absolute;
  right: 17px;
  top: 13px;
  padding: 2px;
  border-left: 1px solid #d1d5db;
}

ul {
  list-style: none;
}

li a {
  text-decoration: none;
}

li a:hover {
  text-decoration: none;
}

.left-pan {
    padding-left: 7px;
  }

  .left-pan i {
    padding-left: 10px;
  }

  .form-input {
    height: 55px;
    text-indent: 33px;
    border-radius: $br-160;
  }

  .form-input:focus {
    box-shadow: $shadow-black-lg;
    border: $b-1 $b-solid $grey;
  }

  .card {
    margin-top: $m;
    width: 100%;
    height: 350px;
    border-radius: $br-100;
    overflow: hidden;
  }

  .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: 50% 50%;
  }

  #sidebar {
    width: 20%;
    padding: 10px;
    margin: 0;
    float: left;
  }

  ul {
    padding: 5px;
  }

  li a {
    color: $grey;
  }

  li a:hover {
    color: $tertiary;
  }

  .navbar-nav {
    margin-left: 35%;
  }

  .nav-item {
    padding-left: 20px;
  }

  #mobile-filter {
    display: none;
  }

  .boat {
    padding-left: $p-xs;
    padding-right: $p-xs;
  }

所有的帮助是高度赞赏!