Bootstrap 4个高度相同的卡(列)

mwkjh3gx 于 2023-01-15 发布在 Bootstrap

关注(0)|答案(7)|浏览(179)

我目前正在从Bootstrap的卡工作。
根据文本标题，我会得到不同的高度为卡，并希望有相同的高度作为最高的一个。
我不介意使用JS，实际上我认为这可能是解决这个问题的最好方法。
我尝试过使用不同的CSS解决方案，比如使用flexbox。
动态呈现时呈现的HTML，下面是一个简单的示例：

.card {
  float: left;
  width: 100%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
  box-shadow: 0px 0px 8px 0.3px rgba(0, 0, 0, 1);
}

.card>img {
  margin-bottom: .75rem;
  display: block;
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.card-text {
  font-size: 85%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SMITE FR</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/album.css" rel="stylesheet">
  <link href="css/ie10-viewport-bug-workaround.min.css" rel="stylesheet">
  <script src="https://www.w3schools.com/lib/w3data.js"></script>
  <link rel="import" href="navigation.html">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="card-deck">
        <div class="col-md-4 col-sm-6 col-12">
          <div class="card">
            <img src="images/dieux/Agni.jpg" alt="BeatsX">
            <h1 class="card-title">BeatsX</h1>
            <div class="text-center">
              <p>1188.0000</p>
              <p>2017-06-09 10:00:00</p>
              <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
          <div class="card">
            <img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
            <h1 class="card-title">Nitendo Switch</h1>
            <div class="text-center">
              <p>2899.0000</p>
              <p>2017-06-10 10:00:00</p>
              <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-12">
          <div class="card">
            <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
            <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
            <div class="text-center">
              <p>6388.0000</p>
              <p>2017-06-06 10:00:00</p>
              <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/44451246/bootstrap-4-cards-of-same-height-in-columns

7条答案

按热度按时间

ve7v8dk21#

Bootstrap 4列已使用Flexbox，因此它们 * 高度相同。只需使用**h-100**高度：100%在卡上，它们将填充列...
https://codeply.com/go/hKhPuxoovH

<div class="container">
    <div class="row">
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="BeatsX">
                    <h1 class="card-title">BeatsX</h1>
                    <div class="text-center">
                        <p>1188.0000</p>
                        <p>2017-06-09 10:00:00</p>
                        <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
                    <h1 class="card-title">Nitendo Switch</h1>
                    <div class="text-center">
                        <p>2899.0000</p>
                        <p>2017-06-10 10:00:00</p>
                        <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-12">
                <div class="card h-100">
                    <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
                    <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
                    <div class="text-center">
                        <p>6388.0000</p>
                        <p>2017-06-06 10:00:00</p>
                        <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
                    </div>
                </div>
            </div>
        </div>
</div>

此外，没有理由浮动卡，并且.col-*应直接位于.row中，而不是.card-deck中

赞(0）回复(0）举报 2023-01-15

3yhwsihp2#

使用卡甲板相等大小的卡这下面的代码为我工作

<div class="card-deck">
    <div class="card mb-2">
        <img class="card-img-top img-fluid" src="//placehold.it/500x180" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card mb-2">
        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
  </div>

Reference you can find here

赞(0）回复(0）举报 2023-01-15

gk7wooem3#

据我所知，没有JavaScript或Flexbox（https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback）是不可行的

赞(0）回复(0）举报 2023-01-15

lzfw57am4#

使用flex获取以下示例

.main {
            display: flex;
        }
        .child {
            flex:1;
            border:1px solid tomato;
        }
        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-flow: column nowrap;
        }
        .content-child{
            padding: 5px;
        }

<div class="main">
    <div class="child">
        <div class="content">
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="content-child">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <div class="child"></div>
</div>

赞(0）回复(0）举报 2023-01-15

i5desfxk5#

试着给卡定高度看这个fiddle

.card {
    float: left;
    width: 100%;
    padding: .75rem;
    height:80vh;
    margin-bottom: 2rem;
    border: 0;
    box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}

赞(0）回复(0）举报 2023-01-15

niknxzdl6#

使用Flexbox可以得到相同高度的卡

.card-deck {
  display:flex;
  flex-wrap: wrap;
}
.card {
    float: left;
    width: 100%;
    height:100%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 0;
    box-shadow: 0px 0px 8px 0.3px rgba(0,0,0,1);
}

.card > img {
    margin-bottom: .75rem;
    display: block;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.card-text {
    font-size: 85%;
}

@media (max-width:767px){
  .card-deck {
    display:block;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="card-deck">
      <div class="col-md-4 col-sm-6 col-12">
        <div class="card">
          <img src="images/dieux/Agni.jpg" alt="BeatsX">
          <h1 class="card-title">BeatsX</h1>
          <div class="text-center">
            <p>1188.0000</p>
            <p>2017-06-09 10:00:00</p>
            <a href="god.php?ID=2" target="_blank" class="btn btn-primary">Voir la Fiche</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-12">
        <div class="card">
          <img src="images/dieux/Agni.jpg" alt="Nitendo Switch">
          <h1 class="card-title">Nitendo Switch</h1>
          <div class="text-center">
            <p>2899.0000</p>
            <p>2017-06-10 10:00:00</p>
            <a href="god.php?ID=3" target="_blank" class="btn btn-primary">Voir la Fiche</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-6 col-12">
        <div class="card">
          <img src="images/dieux/Agni.jpg" alt="iPhone 7 128GB (Jet Blakc)">
          <h1 class="card-title">iPhone 7 128GB (Jet Blakc)</h1>
          <div class="text-center">
            <p>6388.0000</p>
            <p>2017-06-06 10:00:00</p>
            <a href="god.php?ID=1" target="_blank" class="btn btn-primary">Voir la Fiche</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-15

7qhs6swi7#

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
        <!--YOUR CARD HERE-->
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-01-15

我来回答

Bootstrap 4个高度相同的卡(列)

7条答案

相关问题

热门标签

最新问答