Question

我有两个框1.虚拟卡和2.物理卡。

需要帮助如何在引导程序中制作两个分区div？

我已经尝试过，但是当我以响应的方式查看这两个分区div的高度变化时。

让我如何在这两部分中保持差距？

    <div class="container">
    <div class="row">
        <!-- Virtual cards -->
        <div class="col-sm-6 ">
            <h3 style="text-align: center; height: 45px;background-color: 
             #FFC107">Virtual cards</h3>
            <div><img class="img-fluid mx-auto d-block" src="image-01.png"  
             style="width:50%" >
            </div>enter code here
            <div>
                <h3 style="text-align: center; height: 45px;background-color: 
                #FFC107">Block</h3>
            </div>
        </div>

        <!-- Physical Cards -->
        <div class="col-sm-6 ">
            <h3 style="text-align: center; height: 45px;background-color: 
              #FFC107">Physical cards</h3>
            <div><img class="img-fluid mx-auto d-block" src="image/layer- 
                 3.png">
            </div>
            <div>
                <h3 style="text-align: center;">One For All</h3>
                <p style="text-align: center;">A single cards for all 
                  purchase</p>
            </div>
            <div><h3 style="text-align: center; height: 45px;background- 
              color: #FFC107">Block</h3>
            </div>
        </div>  
      </div>

Answer 1

只需使用

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
  <div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

或

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

如何使用Bootstrap 4制作两个响应部分？

1 个答案: