Bootstrap 4列网格 - 响应度

时间：2017-05-30 10:00:16

标签： html css twitter-bootstrap-4

我们正试图实现这样的布局......问题是我无法使其响应，有人可以给我一个提示吗？

我们应该只添加col- *类吗？我们也无法设置特定的高度等因为它必须看起来像一个谜题＆＃34;。

https://codepen.io/anon/pen/mmZqyg 

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

2 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：0)

将子类“blk”添加到代码中的每个内容中，并在css中添加以下媒体查询; 这里max-width值取决于你的要求。

@media only screen and (max-width: 1024px){
  .blk {width: 100%};
}
<div class="bok blk">
  
</div>

}}

相关问题
最新问题