html – 在div列之间添加相等高度的行

2024年1月7日 232次阅读

有没有办法在div与H3-1和包含H3-2的div之间添加一些空格.

>不使用自定义CSS会更好,但没有必要.
>如果可能的话,我想保留col-sm-6,因为使用col-sm-5和offset会增加比我想要的空间更多的空间.
> ml-auto和mr-auto也很重要,因为有时可能会有奇数列(动态进入)并且需要居中.

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0 p-2">
        <h3>H3-1</h3>
        <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
      </div>
    </div>
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0 p-2">
        <h3>H3-2</h3>
        <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
      </div>
    </div>
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0">
        <h3>H3-3</h3>
        <p>asd asd asd a</p>
      </div>
    </div>
  </div>
</div>

最佳答案 [不再相关]是的,例如,通过将列类从col-sm-6更改为col-sm-5并将col-md-offset-2类添加到第二列：

[编辑示例以反映有问题的编辑：]

<!DOCTYPE html>
<html lang="en-us">

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<div class="container">
<div class="row row-eq-height">
    <div class="col-sm-6  align-top ml-auto mr-auto mt-3 pl-1 pr-1">
        <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
            <h3>H3-1</h3>
            <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
        </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 pl-1 pr-1">
        <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
            <h3>H3-2</h3>
            <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
        </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 pl-1 pr-1">
         <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
             <h3>H3-3</h3>
             <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
            </div>
        </div>
    </div>
</div>

</html>
点赞