Bootstrap 4 - 以自定义的方式显示卡片 [英] Bootstrap 4 - displaying cards in a custom way

查看：147
本文介绍了Bootstrap 4 - 以自定义的方式显示卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



我试图创建一个基于Bootstrap 4的合适的语义HTML / CSS，它可以以某种方式呈现卡片元素，而不会增加太多的自定义批量。我到目前为止是这样的：

 < 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< div class =card-body> 
< h4 class =card-title>测试2< / h4> 
 
< / div> 
< / div> 
< / div> 
< div class =col-md-4> 
< div class =card text-center pt-3 card-simple> 
< a href =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< div class =card-body> 
< h4 class =card-title> Test 7< / h4> 
 
< / div> 
< / div> 
< / div> 
 
< / div> 
< / div> 
< / div> 
< / div> 
< / section>

看看我的意思： https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100



我想达到的效果：


  • 所有卡片之间的间距（垂直和水平）相同

  • 左侧的大牌应与右侧列有6张牌的高度相同

  • 保持响应



有没有一种很好的'bootstrap 4'方式来做这件事，还是我需要几乎破解？



另外，我是否应该将所有内容都包含在.card-deck中，如果可以，为什么？ （我使用的是卡片套牌，当卡片保持水平堆叠在其他自定义组件上时）。



任何提示都可以使用。

解决方案

您可以使用Bootstrap 4 实用程序类来调整布局......




  • h-100 使左卡全高以匹配较小的卡

  • p-2 间隔（填充）可以在列之间形成连线



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

 < section class =section d-flex对齐项中心> 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< div class =card-body> 
< h4 class =card-title>测试2< / h4> 
 
< / div> 
< / div> 
< / div> 
< div class =col-md-4 p-2> 
< div class =card text-center pt-3 card-simple> 
< a href =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< 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 =＃GOclass =click-overlay>< / a> 
< img class =card-img-top w-75 mx-autosrc =https://picsum.photos/200alt => 
 
< div class =card-body> 
< h4 class =card-title> Test 7< / h4> 
 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / section>

另外，可以使用 p-3 而不是 p-2 ，如果你想要一个更大的装订线。


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.

解决方案

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.

这篇关于Bootstrap 4 - 以自定义的方式显示卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆