欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

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

CSS
錢諍諍2年前9瀏覽0評論

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  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>

向父容器添加d-md-flex、flex-md-column和justify-content-between類。 & ltdiv class = & quotcol d-MD-flex flex-MD-column justify-content-between p-3 & quot；& gt

從stackOverflowCom容器中刪除h-100和justify-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  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>