Bootstrap 砖石效果只在悬停时有效？卡在悬停时膨胀，也改变其他卡的高度

我正在尝试创建一个像这样的悬停效果

卡扩展悬停，显示标题，图标，内容和点击这里按钮和其他卡，而不是悬停应该只显示标题和图标，而不改变列高..所以现在发生的是这个

悬停效果的作品，但它也改变，并给予其相同的高度，以其他列，留下空白的底部列..有什么办法，我们可以使一个砖石效果的悬停状态？我尝试砖石cdn的bootstrap，但悬停没有工作，这些卡片是重叠的..我正在为网格使用bootstrap类..这甚至可能与正常的css和bootstrap类？在这里'It’这是我的代码供参考

.services {
  padding: 50px;
  font-family: "rubik", sans-serif;
}

.services_box {
  margin-bottom: 25px;
}

.service-item {
  background: #FCFCFC;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease-in-out;
}

.service_heading {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.service-item .service-info p {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
  margin-bottom: 10px;
}

.service-item .service-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  margin-left: 20px;
  margin-bottom: 0;
}

.service-item .service-title a {
  text-decoration: none;
  color: #1761AE;
}

.service-item .service-content .icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #D3E9FF;
  border-radius: 50%;
  z-index: 2;
}

.service-item .service-content .icon i {
  font-size: 25px;
}

.service-item .service-button1 .btn-style8 {
  border: none;
  padding: 0;
  text-decoration: none;
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.service-item .service-button1 .btn-style8 i {
  margin-left: 7px;
  transition: all 0.4s ease;
}

.service_content {
  margin-bottom: -160px;
  display: none;
  transition: all 0.4s ease;
}

.service-item:hover .service_content {
  margin-bottom: 0;
  display: block;
  transition: all 0.4s ease;
}

<div class="services">
  <div class="row">
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff  </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

你可以用grid来代替flex（由bootsrap使用），让元素在网格的2行或更多行中悬停。
演示的想法：

.row {/* make it a 2D grid */
  display: grid;
  gap: 1em;
}
/* add some break points to redraw the grid columns */
@media (min-width:700px) {
  .row {
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
  }
}

@media (min-width:1150px) {
  .row {
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  }
}

@media (min-width:1500px) {
  .row {
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  }
}
/* remove the col elements used by bootsraps , best is to remove them from HTML if the grid option is what you want */
.row>div {
  display: contents;
}
/* your code, see updates further below  */
.services {
  padding: 50px;
  font-family: "rubik", sans-serif;
}

.services_box {
  margin-bottom: 25px;
}

.service-item {
  background: #FCFCFC;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease-in-out;
}

.service_heading {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.service-item .service-info p {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
  margin-bottom: 10px;
}

.service-item .service-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  margin-left: 20px;
  margin-bottom: 0;
}

.service-item .service-title a {
  text-decoration: none;
  color: #1761AE;
}

.service-item .service-content .icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #D3E9FF;
  border-radius: 50%;
  z-index: 2;
}

.service-item .service-content .icon i {
  font-size: 25px;
}

.service-item .service-button1 .btn-style8 {
  border: none;
  padding: 0;
  text-decoration: none;
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.service-item .service-button1 .btn-style8 i {
  margin-left: 7px;
  transition: all 0.4s ease;
}
/* UPDATES */
.service_content {
  max-height: 0;
  transition: all 0.4s ease;
  overflow: hidden;
}

.service-item:hover .service_content {
  max-height: 400px;
}

.service-item:hover {
  grid-row: span 3
}

<div class="services">
  <div class="row">
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 services_box">
      <div class="service-item ">
        <div class="service-box-content">
          <div class="service-figure">
            <div class="service-content">
              <div class="service-info">
                <div class="service_heading">
                  <div class="icon">
                    <span><i class="fa fa-balance-scale"></i></span>
                  </div>
                  <h3 class="service-title">
                    <a href="#">Accelerated Debt Payoff </a>
                  </h3>
                </div>
                <div class="service_content">
                  <p>Consolidating your debt is only half of the battle. You still need a plan to get your debt paid in full. This calculator can show you how to accelerate your debt payoff.
                  </p>
                  <div class="service-button1">
                    <a class="btn-style8" href="#"><span class="bar"></span>Click Here<i class="fa fa-chevron-right"></i></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Bootstrap 砖石效果只在悬停时有效？卡在悬停时膨胀，也改变其他卡的高度

1条答案

相关问题

热门标签

最新问答