如何使用Bootstrap在另一个div中获取粘性div ?

I am new to Bootstrap 4 and was wondering if it's possible to stick a div to the bottom of its parent div. I use class .container with class .row and some child divs:

我是一个新手，我想知道是否可以把一个div标签粘贴到它的父div的底部。

<div class='container'>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
        <div>...</div>  <!--Similar div--> 
        <div>...</div>  <!--Similar div--> 
    </div> 
</div>

So every div in the .row get the height of the highest div and for others there is a space left. Now I have something like that:

所以。row中的每个div都有最高的div还有一个空格。现在我有了这样的东西:

+------------------++------------------++------------------+
|-------title------||-------title------||-------title------|
|-------text1------||-------text2------||-------text3------|
|-------text1------||-------text2------||--lineIWantToFix--|
|-------text1------||--lineIWantToFix--||-------space------|
|-------text1------||-------space------||-------space------|
|--lineIWantToFix--||-------space------||-------space------|
+------------------++------------------++------------------+

And I want it to be like that:

我希望它是这样的:

+------------------++------------------++------------------+
|-------title------||-------title------||-------title------|
|-------text1------||-------text2------||-------text3------|
|-------text1------||-------text2------||-------space------|
|-------text1------||-------space------||-------space------|
|-------text1------||-------space------||-------space------|
|--lineIWantToFix--||--lineIWantToFix--||--lineIWantToFix--|
+------------------++------------------++------------------+

2 个解决方案

#1

I would use flex.

我将使用flex。

It's much cleaner, safer (no overlaps), scalable (it can be multirow) and it works fine on mobile too.

它更干净、更安全(没有重叠部分)、可伸缩(可以是多行)，而且在移动设备上也很好用。

Here is my solution: https://codepen.io/zalog/pen/qPWZJE

这里是我的解决方案:https://codepen.io/zalog/pen/qPWZJE

No fancy CSS:

没有花哨的CSS:

html, body { height: 100%; }
.row > div > * { border: 1px solid gray; }

Html:

<div class="container h-100">
  <div class="row h-100">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 d-flex flex-column">
      <h3>title</h3>
      <p>text</p>
      <h4 class="mt-auto">bottom line</h4>
    </div>
    ...
  </div>
</div>

You may have a dynamic height on your text or bottom line, and will never overlap. But, you must prepare all your parents to have 100% height for our flex to work.

你可能在你的文本或底线上有一个动态的高度，并且永远不会重叠。但是，你必须让你所有的父母都有百分之百的身高让我们的弹性工作。

I hope it help you.

我希望它能帮助你。

#2

You can used flexbox functionally in Bootstrap-4 and set position: absolute to set sticky element.

您可以在Bootstrap-4和set position中灵活使用xbox功能:绝对设置粘性元素。

.main-col {
  padding-bottom: 70px;
}
.main-col h4 {
  position: absolute;
  bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
    <div class="row d-flex">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 main-col">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
       <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 main-col">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 main-col">
            <h3>Title</h3>               
            <p style="text-align: justify">Text</p>
            <h4>Line I want to be fixed to bottom</h4>
        </div>
    </div> 
</div>

#1