Question

我是Bootstrap 4的新手，并且想知道是否可以将div粘贴到其父div的底部。我使用类.container和类.row以及一些子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>

因此.row中的每个div都获得最高div的高度，而对于其他div则剩下一个空格。现在我有类似的东西：

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

我希望它像那样：

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

Answer 1

您可以在Bootstrap-4中使用flexbox功能，并设置position: absolute来设置粘性元素。

.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>

Answer 2

我会使用flex。

它更干净，更安全（没有重叠），可扩展（可以是多行），并且在移动设备上也可以正常工作。

以下是我的解决方案：https://codepen.io/zalog/pen/qPWZJE

没有花哨的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>

您的文字或底线可能有动态高度，并且永远不会重叠。但是，你必须让你所有的父母都准备好100％的身高让我们的弹性工作。

我希望它可以帮到你。

如何使用Bootstrap在另一个div中获得粘性div？

2 个答案: