具有h-100的 Bootstrap 5div溢出父行

bq8i3lrv  于 2023-06-04  发布在  Bootstrap
关注(0)|答案(1)|浏览(151)
html {
  font-size: 14px;
}

.body {
  background-color: whitesmoke;
}

.long-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="container my-5">
  <div class="row">
    <div class="container-fluid rounded shadow bg-white border mb-4">
      <div class="row">
        <div class="col-md-4 p-0 me-2">
          <div id="carouselComponent" class="carousel slide h-100">
            <div class="carousel-inner rounded h-100">
              <div class="carousel-item h-100 active">
                <img src="https://i.pinimg.com/originals/c8/a5/a8/c8a5a813afea19847217c765232b727d.jpg" class="d-block w-100 h-100 object-fit-cover" alt="...">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselComponent" data-bs-slide="prev">
              <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselComponent" data-bs-slide="next">
              <span class="carousel-control-next-icon"></span>
            </button>
          </div>
        </div>
        <div class="col p-3">
          <div class="row">
            <h5 class="mb-1"><a>Red Keep</a></h5>
            <div class="text-truncate text-muted mb-1">
              <i class="fa fa-location-dot"></i> King's Landing
            </div>
          </div>
          <div class="stackOverflowCom d-block d-md-flex justify-content-between align-items-end h-100">
            <div>
              <div class="mb-2"><span class="badge bg-primary">0.0</span> <a href="#!" class="text-muted">(0 reviews)</a></div>
              <div class="long-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis metus quam, sodales eleifend mauris scelerisque non. Integer tincidunt turpis quis varius malesuada. Morbi efficitur pretium mauris vitae tempor. Praesent ultricies arcu eget sagittis malesuada. Vivamus viverra varius scelerisque. <br>
                Suspendisse eget suscipit nulla, at feugiat felis. Curabitur eleifend lectus metus, sit amet convallis neque rhoncus efficitur. Phasellus ullamcorper interdum porta. Suspendisse potenti. Mauris sagittis felis tempus mauris venenatis pellentesque eget non augue. Aenean eu nisi faucibus, varius libero eget, vestibulum sem. Aliquam lacus est, vulputate ut ornare quis, blandit vel nisi. Cras rhoncus ante ipsum, sed sagittis risus aliquet eget.</div>
            </div>
            <div class="mt-2">
              <div class="row justify-content-end align-items-baseline d-md-block">
                <div class="col-4 col-md-12 d-flex justify-content-center align-items-baseline">
                  <h3>10000$</h3>
                  <span>/day</span>
                </div>
                <div class="col-4 col-md-12 d-flex justify-content-end">
                  <h6 class="text-decoration-line-through text-muted me-2">19999</h6>
                  <h6 class="text-success">-10%</h6>
                </div>
              </div>
              <div class="d-grid">
                <button class="btn btn-primary">Book</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

codepen:https://codepen.io/peppapig19/pen/KKGjBoK
在md+屏幕上,当使用h-100时,类为stackOverflowCom的div溢出父行。我首先需要h-100的原因是,我想把除了“红堡”和“君临”之外的所有东西都对齐到卡片的底部。怎样才能做到呢?
任何帮助是非常感谢!

2wnc66cl

2wnc66cl1#

d-md-flexflex-md-columnjustify-content-between类添加到父容器。
<div class="col d-md-flex flex-md-column justify-content-between p-3">
stackOverflowCom容器中删除不需要的h-100justify-content-between(您可能还希望删除align-items-end

html {
  font-size: 14px;
}

.body {
  background-color: whitesmoke;
}

.long-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="container my-5">
  <div class="row">
    <div class="container-fluid rounded shadow bg-white border mb-4">
      <div class="row">
        <div class="col-md-4 p-0 me-2">
          <div id="carouselComponent" class="carousel slide h-100">
            <div class="carousel-inner rounded h-100">
              <div class="carousel-item h-100 active">
                <img src="https://i.pinimg.com/originals/c8/a5/a8/c8a5a813afea19847217c765232b727d.jpg" class="d-block w-100 h-100 object-fit-cover" alt="...">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselComponent" data-bs-slide="prev">
              <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselComponent" data-bs-slide="next">
              <span class="carousel-control-next-icon"></span>
            </button>
          </div>
        </div>
        <div class="col d-md-flex flex-md-column justify-content-between p-3">
          <div class="row">
            <h5 class="mb-1"><a>Red Keep</a></h5>
            <div class="text-truncate text-muted mb-1">
              <i class="fa fa-location-dot"></i> King's Landing
            </div>
          </div>
          <div class="stackOverflowCom d-block d-md-flex align-items-end">
            <div>
              <div class="mb-2"><span class="badge bg-primary">0.0</span> <a href="#!" class="text-muted">(0 reviews)</a></div>
              <div class="long-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis metus quam, sodales eleifend mauris scelerisque non. Integer tincidunt turpis quis varius malesuada. Morbi efficitur pretium mauris vitae tempor. Praesent ultricies arcu eget sagittis malesuada. Vivamus viverra varius scelerisque. <br>
                Suspendisse eget suscipit nulla, at feugiat felis. Curabitur eleifend lectus metus, sit amet convallis neque rhoncus efficitur. Phasellus ullamcorper interdum porta. Suspendisse potenti. Mauris sagittis felis tempus mauris venenatis pellentesque eget non augue. Aenean eu nisi faucibus, varius libero eget, vestibulum sem. Aliquam lacus est, vulputate ut ornare quis, blandit vel nisi. Cras rhoncus ante ipsum, sed sagittis risus aliquet eget.</div>
            </div>
            <div class="mt-2">
              <div class="row justify-content-end align-items-baseline d-md-block">
                <div class="col-4 col-md-12 d-flex justify-content-center align-items-baseline">
                  <h3>10000$</h3>
                  <span>/day</span>
                </div>
                <div class="col-4 col-md-12 d-flex justify-content-end">
                  <h6 class="text-decoration-line-through text-muted me-2">19999</h6>
                  <h6 class="text-success">-10%</h6>
                </div>
              </div>
              <div class="d-grid">
                <button class="btn btn-primary">Book</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

相关问题