发表新帖
发表新帖

Bootstrap 4 - displaying cards in a custom way

前端 未结
关注
2 438
刺人心
刺人心 2021-01-25 06:45

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

相关标签:
2条回答
  • 刺人心
    2021-01-25 07:26

    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.

    0 讨论(0)
  • 栀梦
    2021-01-25 07:38

    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

    0 讨论(0)
 看不清?
提交回复
热议问题