是否可以在带有H3-1
的div和包含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>
答案 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>