Bootstrap 4列網格 - 響應度

我們正在嘗試實現這樣的佈局......問題是我無法使其響應，有人可以給我一個提示嗎？Bootstrap 4列網格 - 響應度

我們應該只添加col- *類嗎？我們也不能設置具體的高度等因爲它看起來像「一個謎題」。

<section class="books-wrapper"> 
<div class="container"> 
    <h2>Bestsellery</h2> 
    <div class="books"> 
     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/1.png" alt=""> 
      <div class="info"> 
       <img src="img/icon/star.png" alt=""> 
      </div> 
      <div class="title"> 
       <h3>Kruh</h3> 
       <h4>Dave Eggers</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/8.png" alt=""> 
      <div class="title"> 
       <h3>Supergirl na Super Hero High</h3> 
       <h4>Lisa Yee</h4> 

      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/2.png" alt=""> 
      <div class="info"> 
       Bestseller 
      </div> 
      <div class="title"> 
       <h3>Hologram pro krále</h3> 
       <h4>Dave Eggers</h4> 
      </div> 
      <a class="price" class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 289 
       Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/9.png" alt=""> 
      <div class="title"> 
       <h3>Jim Sekáč: Syn pana Zubatého</h3> 
       <h4>Dave Eggers</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 289 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/3.png" alt=""> 
      <div class="title"> 
       <h3>Kapitán Flint je zase in</h3> 
       <h4>Torsten Wohlleben,</h4> 
       <h4>Jutta Wetzel</h4> 
      </div> 
      <a class="price" class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 
       Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/10.png" alt=""> 

      <div class="title"> 
       <h3>Kapitán Flint je zase in</h3> 
       <h4>Torsten Wohlleben,</h4> 
       <h4>Jutta Wetzel</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/4.png" alt=""> 
      <div class="info"> 
       -50% 
      </div> 
      <div class="title"> 
       <h3>Klářin velký závod</h3> 
       <h4>Pia Hagmarová</h4> 
      </div> 
      <a class="price sale" href="#"><span>498 Kč</span><i class="fa fa-shopping-cart" aria-hidden="true"></i> 
       199 Kč</a> 
     </div> 
     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/11.png" alt=""> 
      <div class="info"> 
       -50% 
      </div> 
      <div class="title"> 
       <h3>Klářin velký závod</h3> 
       <h4>Pia Hagmarová</h4> 
      </div> 
      <a class="price sale" href="#"><span>498 Kč</span><i class="fa fa-shopping-cart" aria-hidden="true"></i> 
       199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/5.png" alt=""> 

      <div class="title"> 
       <h3>Rekviem za Pluto</h3> 
       <h4> Adam Chromý</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/12.png" alt=""> 

      <div class="title"> 
       <h3>Rekviem za Pluto</h3> 
       <h4>Adam Chromý</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 150 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/6.png" alt=""> 

      <div class="title"> 
       <h3>Chlapec z kociek</h3> 
       <h4>Keith Stuart</h4> 
      </div> 
      <a class="price in-cart" href="#"> 
       <i class="fa fa-shopping-cart" aria-hidden="true"></i><i class="fa fa-check" aria-hidden="true"></i> 
       209 Kč 
      </a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/13.png" alt=""> 

      <div class="title"> 
       <h3>Chlapec z kociek</h3> 
       <h4>Keith Stuart</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 209 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/7.png" alt=""> 
      <div class="info"> 
       <img src="img/icon/star.png" alt=""> 
      </div> 
      <div class="title"> 
       <h3>V pavoučí síti</h3> 
       <h4>Jakub Hrdoun</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 

     <div class="bok"> 
      <img src="http://eredingnew.mobilshow.cz/img/book/14.png" alt=""> 
      <div class="info"> 
       <img src="img/icon/star.png" alt=""> 
      </div> 
      <div class="title"> 
       <h3>V pavoučí síti</h3> 
       <h4>Jakub Hrdoun</h4> 
      </div> 
      <a class="price" href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> 199 Kč</a> 
     </div> 
    </div> 
</div>

section.books-wrapper a.next { 
    position: absolute; 
    bottom: 0px; 
    right: 70px; 
    background-color: #c40058; 
    color: #ffffff; 
    text-transform: uppercase; 
    width: 220px; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; } 
section.books-wrapper .books { 
    position: relative; 
    -webkit-column-count: 7; 
    -moz-column-count: 7; 
    column-count: 7; 
    -webkit-column-gap: 1.25rem; 
    -moz-column-gap: 1.25rem; 
    column-gap: 1.25rem; 
    margin-top: 30px; 
    margin-bottom: 30px; } 
    section.books-wrapper .books .bok { 
    letter-spacing: normal; 
    width: 220px; 
    margin-bottom: 40px; 
    display: inline-block; 
    -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.15); 
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.15); } 
    section.books-wrapper .books .bok .info { 
     height: 40px; 
     background-color: #393e4c; 
     font-size: 20px; 
     font-family: rubik-bold; 
     line-height: 45px; 
     vertical-align: middle; 
     padding-left: 20px; 
     color: #ffffff; } 
     section.books-wrapper .books .bok .info img { 
     margin-top: 11px; } 
    section.books-wrapper .books .bok .title { 
     background-color: #f8f9fb; 
     padding: 20px; } 
     section.books-wrapper .books .bok .title h3 { 
     font-size: 20px; 
     font-family: rubik-medium; 
     text-transform: uppercase; 
     font-weight: normal; 
     margin: 0px; 
     padding: 0px; } 
     section.books-wrapper .books .bok .title h4 { 
     font-size: 12px; 
     font-family: rubik-regular; 
     font-weight: normal; 
     margin: 0px; 
     padding: 0px; 
     padding-top: 7px; } 
    section.books-wrapper .books .bok a.price { 
     font-size: 30px; 
     color: #36383f; 
     font-family: rubik-medium; 
     text-decoration: underline; 
     display: block; 
     text-align: right; 
     padding-top: 10px; 
     padding-right: 15px; 
     padding-bottom: 5px; } 
     section.books-wrapper .books .bok a.price i.fa { 
     font-size: 20px; 
     margin-right: 10px; } 
     section.books-wrapper .books .bok a.price span:before { 
     text-decoration: none; } 
    section.books-wrapper .books .bok a.price.sale { 
     text-decoration: line-through; } 
     section.books-wrapper .books .bok a.price.sale span { 
     font-size: 15px; 
     font-family: rubik-regular; 
     padding-right: 15px; } 
    section.books-wrapper .books .bok a.price.in-cart { 
     color: #c40058; } 
     section.books-wrapper .books .bok a.price.in-cart i.fa { 
     margin: 0px; } 
     section.books-wrapper .books .bok a.price.in-cart i.fa.fa-check { 
     padding-left: 20%; 
     font-size: 24px; }

來源

2017-05-30 VespaQQ

嘛。你已經添加了固定的寬度，我發現你沒有在任何地方使用引導類。爲什麼不爲網格使用col-classes。 https://getbootstrap.com/examples/grid/ –

添加CSS

@media only screen and (max-width: 1670px) { 
      .books{ 
      -webkit-column-count: 6!important; 
      -moz-column-count: 6!important; 
      column-count: 6!important; 
      } 
     } 
     @media only screen and (max-width: 1450px) { 
      .books{ 
      -webkit-column-count: 5!important; 
      -moz-column-count: 5!important; 
      column-count: 5!important; 
      } 
     } 
     @media only screen and (max-width: 1250px) { 
      .books{ 
      -webkit-column-count: 4!important; 
      -moz-column-count: 4!important; 
      column-count: 4!important; 
      } 
     } 
     @media only screen and (max-width: 1000px) { 
      .books{ 
      -webkit-column-count: 3!important; 
      -moz-column-count: 3!important; 
      column-count: 3!important; 
      } 
     } 
     @media only screen and (max-width: 765px) { 
      .books{ 
      -webkit-column-count: 2!important; 
      -moz-column-count: 2!important; 
      column-count: 2!important; 
      } 
     } 
     @media only screen and (max-width: 550px) { 
      .books{ 
      -webkit-column-count: 1!important; 
      -moz-column-count: 1!important; 
      column-count: 1!important; 
      margin: auto; 
      width: 220px; 
      margin-top: 40px; 
      } 
     }

來源

2017-05-30 11:15:43

添加子類「BLK」每一個在你的代碼和CSS中還有以下媒體查詢; 此處的最大寬度值取決於您的要求。

@media only screen and (max-width: 1024px){ 
 
    .blk {width: 100%}; 
 
}

<div class="bok blk"> 
 
    
 
</div>

}}

來源

2017-05-30 10:52:30

Bootstrap 4列網格 - 響應度

回答

相關問題