Bootstrap 在卡片网格上执行搜索时卡片被压扁

Question

我在卡片中添加了一张新图片，但当我进行搜索时，卡片被压扁了。无法确定它是与 Bootstrap 相关的网格还是图像大小的问题。我感谢任何有建议的人，我可以做些什么来解决这个问题。我修改了 .card-top-img css 规则，但这不起作用。我尝试了不同的网格选项。

JSFiddle for the code

<html lang="en" dir="ltr">
  <head>
  <meta charset="utf-8">
  <title>"Brick Sets Coming Next"</title>
  <meta charset="utf-8">
    <title>"Brick Sets Coming Next"</title> <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="main.js"></script>
    </head>
<body>

      <div class="container-fluid-nav text-center">
        <h2>All the Pugs</h2>
      </div>


        <div class="container">
            <div class="row">
              <div class="col-12">
                <h3 class="text-center release-date">Pug List</h3>
              </div>
            </div>
        </div>

        <div class="container">
       <input class="form-control" type="search" id="search" placeholder="Search" aria-label="Search">
      </div>




      <!-- Row 1 of June 1st release -->
      <div class="container">
        <div class="card-deck">
          <div class="row">

              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
                  <div class="card h-100">
                      <div class="card-body">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                        <h5 class="card-title text-center">Super Pug</h5>
                        <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                        <!--<div class="row justify-content-center">-->
                          <div class="mt-auto">
                            <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                          </div>
                        <!--</div>-->
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
                  <div class="card h-100">
                      <div class="card-body">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSJCoWp4LK9gFWFejslm5pmUvp54flTIR5tRQ&usqp=CAU" class="card-img-top" alt="...">
                        <h5 class="card-title text-center">Funny Pug</h5>
                        <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                        <!--<div class="row justify-content-center">-->
                          <div class="mt-auto">
                            <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                          </div>
                        <!--</div>-->
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
                  <div class="card h-100">
                      <div class="card-body">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                        <h5 class="card-title text-center">Crazy Pug</h5>
                        <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                        <!--<div class="row justify-content-center">-->
                          <div class="mt-auto">
                            <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                          </div>
                        <!--</div>-->
                      </div>
                  </div>
              </div>






 <!-- Row 2 of June -->


           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
               <div class="card h-100">
                   <div class="card-body">
                     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                     <h5 class="card-title text-center">Little Pug</h5>
                     <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                     <!--<div class="row justify-content-center">-->
                       <div class="mt-auto">
                         <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                       </div>
                     <!--</div>-->
                   </div>
               </div>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
               <div class="card h-100">
                   <div class="card-body">
                     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                     <h5 class="card-title text-center">Cool Pug</h5>
                     <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                     <!--<div class="row justify-content-center">-->
                       <div class="mt-auto">
                         <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                       </div>
                     <!--</div>-->
                   </div>
               </div>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
               <div class="card h-100" >
                   <div class="card-body">
                     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                     <h5 class="card-title text-center">cool dog</h5>
                     <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                     <!--<div class="row justify-content-center">-->
                       <div class="mt-auto">
                         <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                       </div>
                     <!--</div>-->
                   </div>
               </div>
           </div>
            <div class="no-results">No results found</div>
          </div>


        </div>
</div>

  </body>
</html>

$(document).ready(function(){
  $('#search').on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".uvs").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width


.body{
  margin-left:auto;
    margin-right:auto;
    position: static;
    z-index: 999;
}

.card{

  width: 40%;
  margin-top: 30px;
  margin-bottom: 50px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

.card-columns{
  display: inline-block
}

.card-body {
  display: flex;
  flex-direction: column;
  z-index: 999;
}


.card-deck{
  margin-bottom: 20px;
}

.navbar{
  margin-bottom: 40px;
}

.navbar-custom{
  background-color: #0B4949;
}


.container-fluid-nav{
  background-color: #448383;
  height: 70px;
  padding-top: 15px;
  margin-bottom: 25px;
}

.btn{
  margin-left: 7px;
  margin-top: auto;
}

button.btn {
  margin-top: auto;
}

h2{
  color: white;
}

img {

  width: 200px; /* You can set the dimensions to whatever you want */
  height: 200px;
  object-fit: contain;
}

.release-date{
  margin-bottom: 25px;
}

.no-results{
  display: none;
}.card.h-100 {
    width: 100%;
}

.uvs{margin-bottom:30px;}

Answer 1

您需要删除 img css object-fit: contain; 并添加 img css margin-bottom:20px 图片下方的间距。

img { width: 200px; height: 200px; margin-bottom:20px; }

同时将内联 css 添加到卡片列所在的行，以便在搜索后正确显示

 <div class="row" style="width: 100%;">

$(document).ready(function(){
  $('#search').on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".uvs").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width


.body{
  margin-left:auto;
    margin-right:auto;
    position: static;
    z-index: 999;
}

.card{

  width: 40%;
  margin-top: 30px;
  margin-bottom: 50px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

.card-columns{
  display: inline-block
}

.card-body {
  display: flex;
  flex-direction: column;
  z-index: 999;
}


.card-deck{
  margin-bottom: 20px;
}

.navbar{
  margin-bottom: 40px;
}

.navbar-custom{
  background-color: #0B4949;
}


.container-fluid-nav{
  background-color: #448383;
  height: 70px;
  padding-top: 15px;
  margin-bottom: 25px;
}

.btn{
  margin-left: 7px;
  margin-top: auto;
}

button.btn {
  margin-top: auto;
}

h2{
  color: white;
}

img {

  width: 200px; /* You can set the dimensions to whatever you want */
  height: 200px;
  margin-bottom:20px;
  
}

.release-date{
  margin-bottom: 25px;
}

.no-results{
  display: none;
}.card.h-100 {
    width: 100%;
}

.uvs{margin-bottom:30px;}

<html lang="en" dir="ltr">
  <head>
  <meta charset="utf-8">
  <title>"Brick Sets Coming Next"</title>
  <meta charset="utf-8">
    <title>"Brick Sets Coming Next"</title> <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="main.js"></script>
    </head>
<body>

      <div class="container-fluid-nav text-center">
        <h2>All the Pugs</h2>
      </div>


        <div class="container">
            <div class="row">
              <div class="col-12">
                <h3 class="text-center release-date">Pug List</h3>
              </div>
            </div>
        </div>

        <div class="container">
       <input class="form-control" type="search" id="search" placeholder="Search" aria-label="Search">
      </div>




      <!-- Row 1 of June 1st release -->
      <div class="container">
        <div class="card-deck">
          <div class="row" style="width: 100%;">

              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
                  <div class="card h-100">
                      <div class="card-body">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                        <h5 class="card-title text-center">Super Pug</h5>
                        <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                        <!--<div class="row justify-content-center">-->
                          <div class="mt-auto">
                            <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                          </div>
                        <!--</div>-->
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
                  <div class="card h-100">
                      <div class="card-body">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSJCoWp4LK9gFWFejslm5pmUvp54flTIR5tRQ&usqp=CAU" class="card-img-top" alt="...">
                        <h5 class="card-title text-center">Funny Pug</h5>
                        <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                        <!--<div class="row justify-content-center">-->
                          <div class="mt-auto">
                            <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                          </div>
                        <!--</div>-->
                      </div>
                  </div>
              </div>
              <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
                  <div class="card h-100">
                      <div class="card-body">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                        <h5 class="card-title text-center">Crazy Pug</h5>
                        <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                        <!--<div class="row justify-content-center">-->
                          <div class="mt-auto">
                            <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                            <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                          </div>
                        <!--</div>-->
                      </div>
                  </div>
              </div>






 <!-- Row 2 of June -->


           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
               <div class="card h-100">
                   <div class="card-body">
                     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                     <h5 class="card-title text-center">Little Pug</h5>
                     <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                     <!--<div class="row justify-content-center">-->
                       <div class="mt-auto">
                         <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                       </div>
                     <!--</div>-->
                   </div>
               </div>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
               <div class="card h-100">
                   <div class="card-body">
                     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                     <h5 class="card-title text-center">Cool Pug</h5>
                     <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                     <!--<div class="row justify-content-center">-->
                       <div class="mt-auto">
                         <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                       </div>
                     <!--</div>-->
                   </div>
               </div>
           </div>
           <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 uvs">
               <div class="card h-100" >
                   <div class="card-body">
                     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Mops_oct09_cropped2.jpg" class="card-img-top" alt="...">
                     <h5 class="card-title text-center">cool dog</h5>
                     <p class="card-text text-center">Pug Name: Derek<br />Weight: 15.6lbs<br />Height: 27.6 inches</p>
                     <!--<div class="row justify-content-center">-->
                       <div class="mt-auto">
                         <a href="#" class="align-self-end btn btn-primary" target="_blank">Buy</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Resell</a>
                         <a href="#" class="align-self-end btn btn-secondary" disabled>Buy</a>
                       </div>
                     <!--</div>-->
                   </div>
               </div>
           </div>
            <div class="no-results">No results found</div>
          </div>


        </div>
</div>

  </body>
</html>

Bootstrap 在卡片网格上执行搜索时卡片被压扁

Bootstrap card is squished when performing a search on the grid of cards

css

twitter-bootstrap

bootstrap-4

responsive

bootstrap-cards