Question

我必须使用Bootsrap 4创建自定义网格布局。在屏幕上将有4个框。左上方将是带有图像的超链接。右上方将是一个搜索框，其高度必须与搜索框一样高。棘手的部分是我的底部。底部方框的末尾应相同。现在看起来像这样：

.custombox {
  background: #ffffff;
  transition: 0.5s ease;
  border-radius: 5px;
  box-shadow: -2px 3px 5px 4px rgba(0, 0, 0, 0.14);
}

.custombox:hover {
  background-color: white;
  box-shadow: 0px 3px 50px 10px rgba(0, 0, 0, 0.05);
  transition: 0.5s ease;
  border-radius: 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row" style="background-color:grey">
    <div class="text-center col-md-6">
      <div class="my-2 col custombox">
        <div>
          <img src="../Images/Image.png" />
          <h4><span>Some Text..</span></h4>
        </div>
      </div>
      <div class="my-2 col custombox ">Widget 2</div>
    </div>
    <div class="text-center col-md-6">
      <div class="my-2 col custombox">
        Search
        <input type="search" />
      </div>
      <div class="my-2 col custombox">
        <label>
                        ASD
                        mklmlsmadlk
                        amslkédmklasmd
                        klmnaélksmd
                        émlkmaémsdémsa
                        éknaéslkndlkasn
                        anskldnaléksdn
                        anlksdnélkasnd
                        ansdknaélksdn
                        mklmlsmadlk
                        amslkédmklasmd
                        klmnaélksmd
                        émlkmaémsdémsa
                        éknaéslkndlkasn
                        anskldnaléksdn
                        anlksdnélkasnd
                        ansdknaélksdn
                        ASD
                        mklmlsmadlk
                        amslkédmklasmd
                        klmnaélksmd
                        émlkmaémsdémsa
                        éknaéslkndlkasn
                        anskldnaléksdn
                        anlksdnélkasnd
                        ansdknaélksdn
                        mklmlsmadlk
                        amslkédmklasmd
                        klmnaélksmd
                        émlkmaémsdémsa
                        éknaéslkndlkasn
                        anskldnaléksdn
                        anlksdnélkasnd
                        ansdknaélksdn
                    </label>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/bfrank01/5ma4y2ub/8/

Answer 1

您可以使用d-flex，flex-column和flex-grow-1的组合来完成此操作。

<div class='container'>
  <div class='row'>
    <div class='col-md-6 d-flex flex-column'>
      <div></div>
      <div class='flex-grow-1'></div>
    </div>
    <div class='col-md-6 d-flex flex-column'>
      <div></div>
      <div class='flex-grow-1'></div>
    </div>
  </div>
</div>

row已经具有可弯曲显示，带有拉伸对齐项（默认情况下），这些拉伸对齐项使col-md-6具有相同的高度。然后，将col-md-6的显示更改为flex display，将flex-direction更改为column。然后，将每列中的第二个div设置为增长以使其父级与flex-grow相适应。

Demo。

Answer 2

将顶部的盒子连续放置，将底部的另一行放置，并将其底部盒子的高度设置为100％。这样盒子可以有相似的高度。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class='container'>
    <div class='row'>
        <div class='col-6'>box 1</div>
        <div class='col-6'>box 2</div>
    </div>
    <div class='row'>
        <div class='col-6' style="height:100%;">box 3</div>
        <div class='col-6' style="height:100%;">box 4</div>
    </div>
</div>

Bootstrap 4网格布局定制

2 个答案: