在具有相等高度的行的div列之间添加空间

时间:2018-12-23 18:00:57

标签: html css bootstrap-4

是否可以在带有H3-1的div和包含H3-2的div之间添加一些空间。

  • 最好不使用自定义CSS,但这不是必需的。
  • 如果可能的话,我想保留col-sm-6,因为使用col-sm-5offset会比我想要的空间更多。
  • ml-automr-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>

3 个答案:

答案 0 :(得分:1)

[不再相关]是的,例如,通过将列类从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>

答案 1 :(得分:0)

我不确定为什么您不能添加自定义CSS,但是我设法使用bootstrap 4的flex布局添加了一些空间。

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<div class="container">
<div class="flex-row row-eq-height d-inline-flex">
    <div class="col-sm-6 border align-top mt-3 bg-light mr-2">
        <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 mt-3 bg-light ml-2">
        <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>
</div>

您可以根据需要增加/减少mr-2 / ml-2来增加引导列的左右边距

答案 2 :(得分:0)

@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 align-top ml-auto mr-auto mt-3 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <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 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <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 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <h3>H3-3</h3>
        <p>asd asd asd a</p>
      </div>
    </div>
  </div>
</div>