Bootstrap карта сдавливается при поиске по сетке карт - PullRequest
Новая
       76

Bootstrap карта сдавливается при поиске по сетке карт

0 голосов
/ 09 июля 2020

Я добавил новое изображение на карту, и когда я выполняю поиск, карта сжимается. Не могу понять, связана ли это сетка с Bootstrap или проблема с размером изображения. Я ценю всех, у кого есть предложения, что я могу сделать, чтобы это исправить. Я возился с правилами .card-top-img css, но это не работает. Я пробовал разные варианты сетки.

JSFiddle для кода 

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

1 Ответ

0 голосов
/ 10 июля 2020

Вам необходимо удалить 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>
...