Question

.force-to-bottom {
  background: grey;
  align-self: flex-end;
  width: 100%;
   margin: 0;
   text-align: center; 
   height:200px;
}

#story {
 text-align: center;
  display: flex;
  flex-direction: column;

  padding:0;
  justify-content: space-between;
}

.row {
  display: flex;
}

html, body, .row, .container {
  height: 100%;
}


.container {
  background: pink;
}

<div class="container fill-height">
  <div class="row">

    <div id="story" class="col-lg-12">
      <h1 style="text-align:center;">Demo</h1>

      <div class="row force-to-bottom text-center">
        <p>It's supposed to stay at the bottom of this section n goes across the whole screen</p>
      </div>
    </div>
  </div>
</div>

我有一个包含多个容器的页面。我正在尝试在其中一个容器的底部创建一个类似页脚的部分。该页脚应保留在该部分的底部，但不应位于整个页面的底部。我试图添加force-to-bottom div，但这不起作用。我该怎么做到这一点？非常感谢！

<div id="containerOne" class="container fill-height">
    <div class="row force-to-bottom text-center">
      <p>this is the footer of that one div</p>
    </div>
</div>
<div id="containerTwo" class="container fill-height">
</div>

Answer 1

您可以使用flexbox轻松实现此目的。

#story属性display: flex以及flex-direction: column将.force-to-bottom属性与align-self: flex-end对齐，以使其子项垂直对齐。
在html, body, .row, #story, .container { height: 100%; } .row { display: flex; } .container { background: pink; } .force-to-bottom { background: grey; align-self: flex-end; width: 100%; height: 50px; margin: 0; justify-content: center; align-items: center; } #story { display: flex; flex-direction: column; justify-content: space-between; padding: 0; }孩子旁边，只需将属性<div id="payContainer" class="container fill-height"> <div class="row"> <div id="story" class="col-lg-12"> <h1 style="text-align:center;">Demo</h1> <div class="row force-to-bottom text-center"> <p>It's supposed to stay at the bottom of this section n goes across the whole screen</p> </div> </div> </div> </div>浮动到各自容器的底部。

＆＃13;

display: flex

＆＃13;

#story

＆＃13;

OP更新代码后更新：

就像我提到的，对于上面更新的HTML结构，你有。您需要将.container应用于flex-direction: column div而不是.force-to-bottom）。还要添加另一个属性{ "Token": "31|f2a55190-c12b-4a28-8e57-bfe1c36581f5|838", "OffsetInMilliseconds": 0, "Type": "AudioPlayer.PlaybackNearlyFinished", "Context": null, "RequestId": "amzn1.echo-api.request.aa961d0b-cc62-4921-a674-b8c2e00e0d22", "Timestamp": "2017-02-19T04:34:33Z" }，以使其子元素彼此对齐。 { "Card": null, "OutputSpeech": null, "Reprompt": null, "ShouldEndSession": true, "Directives": [{ "type": "AudioPlayer.Play", "playBehavior": "ENQUEUE", "audioItem": { "stream": { "token": "32|f2a55190-c12b-4a28-8e57-bfe1c36581f5|839", "expectedPreviousToken": "32|f2a55190-c12b-4a28-8e57-bfe1c36581f5|838", "url": "https://www.example.com/music/test/mysong.mp3", "offsetInMilliseconds": 0 } } }] }样式保持不变。

在Bootstrap容器的底部创建一个部分

1 个答案: