Question

我搜索过很多帖子，试图找到解决问题的方法，然而，似乎都没有。我尝试将'align-self：flex-end'应用于.reveal-btn但是，这只是将按钮向右移动。我想要卡片底部的按钮，'margin-top：auto'也不成功。

我使用bootstrap进行网站的基本布局，虽然这个特定部分不需要引导类除了布局网格。我想知道Bootstrap是否导致了一些风格的冲突？

我附上了一个我想要实现的例子。注意：代码片段功能似乎不允许我为必要的引导程序CDN链接添加脚本标记，因此这些卡布局在列中，而不是一行。

.service-card {
  box-sizing: border-box;
  min-width: 40%;
  margin: 20px 10px;
  background-color: #e0e0e0;
  border: 2px solid rgba(0, 165, 227, 0);
  border-radius: 5px;
  transition: 0.5s;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.service-card:hover {
  border: 2px solid rgba(0, 165, 227, 1);
}

.service-card-header {
  border-bottom: 2px solid #00a5e3;
}

.service-card-header img {
  border-radius: 5px 5px 0 0;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
}

.service-card-heading {
  font-size: 18px;
  margin-bottom: 12px;
}

.service-card-desc {
  margin-bottom: 10px;
  font-size: 12px;
}

.reveal-btn {
  display: flex;
  margin-top: auto;
  border: 0;
  outline: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.reveal-btn .go-arrow {
  position: relative;
  background: #087ca7;
  width: 30px;
  height: 30px;
  border-radius: 2px;
}

.reveal-btn .go-arrow img {
  width: 15px;
  height: 15px;
}

.reveal-btn .go-arrow:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  top: 12.5px;
  right: -1.5px;
  background: #087ca7;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.reveal-btn .reveal-text {
  display: flex;
  position: relative;
  width: 0;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: #00a5e3;
  color: #fff;
  font-weight: 300;
  transition: 0.6s all;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.reveal-btn .reveal-text span {
  width: 100%;
  opacity: 0;
  position: absolute;
  left: 50%;
  font-size: 12px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: 0.6s all ease-in;
  transition-delay: 0.2s;
}

.reveal-btn:hover .go-arrow:after {
  right: -2px;
}

.reveal-btn:hover .reveal-text {
  width: 100px;
}

.reveal-btn:hover .reveal-text span {
  opacity: 1;
  top: 0;
}

<div class="service-cards">
  <div class="container-max">
    <div class="row  no-gutters">
      <div class="col-sm-6 col-lg-3 d-flex">
        <div class="service-card">
          <div class="service-card-header">
            <img class="img-fluid" src="../img/vw-transporter-in-spray-booth-for-accident-repair-300x220.jpg" />
          </div>
          <div class="service-card-body">
            <h2 class="service-card-heading">Accident Repair</h2>
            <p class="service-card-desc">
              Hassle free repairs that ensure your car is returned to its original condition. We'll do all of the insurance liaison.
            </p>
            <button class="reveal-btn" onclick="window.location='accident-repair.html';">
                <div class='go-arrow'>
                  <img src="../img/go-arrow.png" />
                </div>
                <div class='reveal-text'>
                  <span>Find out more</span>
                </div>
              </button>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 d-flex">
        <div class="service-card">
          <div class="service-card-header">
            <img class="img-fluid" src="../img/bonnet-dent-filled-300x220.jpg" />
          </div>
          <div class="service-card-body">
            <h2 class="service-card-heading">Scratch and Dent Removal</h2>
            <p class="service-card-desc">
              We remove scratches and dents no matter who large or small. Each prepared and finished for long term results.
            </p>
            <button class="reveal-btn" onclick="window.location='accident-repair.html';">
                <div class='go-arrow'>
                  <img src="../img/go-arrow.png" />
                </div>
                <div class='reveal-text'>
                  <span>Find out more</span>
                </div>
              </button>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 d-flex">
        <div class="service-card">
          <div class="service-card-header">
            <img class="img-fluid" src="../img/porsche-911-carrera-spoiler-300x220.jpg" />
          </div>
          <div class="service-card-body">
            <h2 class="service-card-heading">Restoration</h2>
            <p class="service-card-desc">
              Got a dream car but its seen better days? We’re here to help return it to its natural beauty.
            </p>
            <button class="reveal-btn" onclick="window.location='accident-repair.html';">
                <div class='go-arrow'>
                  <img src="../img/go-arrow.png" />
                </div>
                <div class='reveal-text'>
                  <span>Find out more</span>
                </div>
              </button>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3 d-flex">
        <div class="service-card">
          <div class="service-card-header">
            <img class="img-fluid" src="../img/peugeot-206-spoiler-sanding-preparation-for-respray-300x220.jpg" />
          </div>
          <div class="service-card-body">
            <h2 class="service-card-heading">Modifications</h2>
            <p class="service-card-desc">
              Making your car look unique helps to turn heads. We offer a large range of modification and customisation options to win over the crowd.
            </p>
            <button class="reveal-btn" onclick="window.location='accident-repair.html';">
                <div class='go-arrow'>
                  <img src="../img/go-arrow.png" />
                </div>
                <div class='reveal-text'>
                  <span>Find out more</span>
                </div>
              </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

自动边距（mt-auto）适用于flexbox子设备。因此，服务卡也应该是display:flex。然后使用flex-grow:1使service-card-body填充剩余的卡片高度。

＆＃13;

.service-card {
  min-width: 40%;
  margin: 20px 10px;
  background-color: #e0e0e0;
  border: 2px solid rgba(0, 165, 227, 0);
  border-radius: 5px;
  transition: 0.5s;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  border: 2px solid rgba(0, 165, 227, 1);
}

.service-card-header {
  border-bottom: 2px solid #00a5e3;
}

.service-card-header img {
  border-radius: 5px 5px 0 0;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  flex-grow: 1;
}

.service-card-heading {
  font-size: 18px;
  margin-bottom: 12px;
}

.service-card-desc {
  margin-bottom: 10px;
  font-size: 12px;
}

.reveal-btn {
  display: flex;
  margin-top: auto;
  border: 0;
  outline: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.reveal-btn .go-arrow {
  position: relative;
  background: #087ca7;
  width: 30px;
  height: 30px;
  border-radius: 2px;
}

.reveal-btn .go-arrow img {
  width: 15px;
  height: 15px;
}

.reveal-btn .go-arrow:after {
  content: ' ';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  top: 12.5px;
  right: -1.5px;
  background: #087ca7;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.reveal-btn .reveal-text {
  display: flex;
  position: relative;
  width: 0;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: #00a5e3;
  color: #fff;
  font-weight: 300;
  transition: 0.6s all;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.reveal-btn .reveal-text span {
  width: 100%;
  opacity: 0;
  position: absolute;
  left: 50%;
  font-size: 12px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: 0.6s all ease-in;
  transition-delay: 0.2s;
}

.reveal-btn:hover .go-arrow:after {
  right: -2px;
}

.reveal-btn:hover .reveal-text {
  width: 100px;
}

.reveal-btn:hover .reveal-text span {
  opacity: 1;
  top: 0;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="service-cards">
  <div class="container-max">
<div class="row  no-gutters">
  <div class="col-sm-6 col-lg-3 d-flex">
    <div class="service-card">
      <div class="service-card-header">
        <img class="img-fluid" src="//placehold.it/400x300" />
      </div>
      <div class="service-card-body">
        <h2 class="service-card-heading">Accident Repair</h2>
        <p class="service-card-desc">
          Hassle free repairs that ensure your car is returned to its original condition. We'll do all of the insurance liaison.
        </p>
        <button class="reveal-btn  mt-auto" onclick="window.location='accident-repair.html';">
            <div class='go-arrow'>
              <img src="//placehold.it/400x300" />
            </div>
            <div class='reveal-text'>
              <span>Find out more</span>
            </div>
          </button>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3 d-flex">
    <div class="service-card">
      <div class="service-card-header">
        <img class="img-fluid" src="//placehold.it/400x300" />
      </div>
      <div class="service-card-body">
        <h2 class="service-card-heading">Scratch and Dent Removal</h2>
        <p class="service-card-desc">
          We remove scratches and dents no matter who large or small. Each prepared and finished for long term results.
        </p>
        <button class="reveal-btn  mt-auto" onclick="window.location='accident-repair.html';">
            <div class='go-arrow'>
              <img src="//placehold.it/400x300" />
            </div>
            <div class='reveal-text'>
              <span>Find out more</span>
            </div>
          </button>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3 d-flex">
    <div class="service-card">
      <div class="service-card-header">
        <img class="img-fluid" src="//placehold.it/400x300" />
      </div>
      <div class="service-card-body">
        <h2 class="service-card-heading">Restoration</h2>
        <p class="service-card-desc">
          Got a dream car but its seen better days? We’re here to help return it to its natural beauty.
        </p>
        <button class="reveal-btn mt-auto" onclick="window.location='accident-repair.html';">
            <div class='go-arrow'>
              <img src="//placehold.it/400x300" />
            </div>
            <div class='reveal-text'>
              <span>Find out more</span>
            </div>
          </button>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3 d-flex">
    <div class="service-card">
      <div class="service-card-header">
        <img class="img-fluid" src="//placehold.it/400x300" />
      </div>
      <div class="service-card-body">
        <h2 class="service-card-heading">Modifications</h2>
        <p class="service-card-desc">
          Making your car look unique helps to turn heads. We offer a large range of modification and customisation options to win over the crowd.
        </p>
        <button class="reveal-btn mt-auto" onclick="window.location='accident-repair.html';">
            <div class='go-arrow'>
              <img src="//placehold.it/400x300" />
            </div>
            <div class='reveal-text'>
              <span>Find out more</span>
            </div>
          </button>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

＆＃13;

https://www.codeply.com/go/N9hMhTSOOK

P.S - Snippet工具允许您在HTML部分的顶部插入CSS链接和脚本。

Bootstrap对齐按钮到flex-box列的底部

1 个答案: