Bootstrap 4 - displaying cards in a custom way

2020-04-20 22:14发布

站内文章 / HTML/CSS
80 0 0

问题:

I'm trying to create a proper semantic HTML/CSS based on Bootstrap 4 that would present card elements in a certain way without adding too much custom bulk.

What I have so far is this: 

<section class="section d-flex align-items-center">
  <div class="container">
    <div class="row news-block">
      <div class="col-md-5">
        <div class="card text-center pt-3 card-simple">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">

          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple mb-4">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 2</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 3</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 4</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 5</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 6</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 7</h4>

              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</section>

A Codepen to see what I mean: https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100

What I'd like to achieve:

  • the same spacing (Vertical & horizontal) between all cards
  • the "big" card on the left should be the same height as the right column with 6 cards
  • keep it responsive

Is there a good 'bootstrap 4' way of doing this, or do I need to hack around pretty much?

Also, should I wrap everything in .card-deck and if so, why? (I'm using card-deck for when cards stay horizontally stacked on other custom components).

Any tips appreciated.

回答1:

You can use the Bootstrap 4 utility classes to adjust the layout...

  • h-100 to make the left card full-height to match the smaller cards
  • p-2 spacing (padding) to make even gutter between columns

https://www.codeply.com/go/CPe58ZHi2u

<section class="section d-flex align-items-center">
  <div class="container">
    <div class="row news-block py-1">
      <div class="col-md-5 p-2">
        <div class="card text-center pt-3 card-simple h-100">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7">
        <div class="row">
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 2</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 3</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 4</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 5</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 6</h4>

              </div>
            </div>
          </div>
          <div class="col-md-4 p-2">
            <div class="card text-center pt-3 card-simple">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

              <div class="card-body">
                <h4 class="card-title">Test 7</h4>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Also, p-3 could be used instead of p-2 if you want a larger gutter.



回答2:

he answered before i finished but here's another version of what he did haha

<section class="section d-flex align-items-center">
  <div class="container-fluid px-0">
    <div class="row m-0 news-block pt-3 pl-3">
      <div class="col-md-5 mb-3 pl-0 pr-3 pr-md-0">
        <div class="card h-100 text-center pt-3 card-simple">
          <a href="#GO" class="click-overlay"></a>
          <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">

          <div class="card-body">
            <h4 class="card-title">Test 1</h4>

          </div>
        </div>
      </div>
      <div class="col-md-7 pl-0 pl-md-3 pr-0">
        <div class="row mx-0">

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 2</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 3</h4>
              </div>
            </div>
          </div>

           <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 4</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 5</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 6</h4>
              </div>
            </div>
          </div>

          <div class="col-md-4 pl-0 pr-3 pb-3">
            <div class="card text-center pt-3 card-simple h-100">
              <a href="#GO" class="click-overlay"></a>
              <img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt="">
              <div class="card-body">
                <h4 class="card-title">Test 7</h4>
              </div>
            </div>
          </div>







        </div>
      </div>
    </div>
  </div>
</section>

https://codepen.io/chulps/pen/PaZgNO



标签： html css twitter-bootstrap bootstrap-4
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~