logo标签列表

如何在Bootstrap中将行DIV对齐到底部？

htmlcsstwitter-bootstrapresponsive-design
15

我想将我的行 div 或者说最后一个元素与底部对齐。我正在使用 Bootstrap 3，代码如下：

<div id="main">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="logo col-centered">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title text-center">THE TITLE</div>
    </div>
    <div class="row">
      <div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
      <div class="description_arrow col-centered"></div>
    </div>
    <div class="row">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="img/image-phone.png" class="img-responsive" style="bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>
在CSS中我有以下代码:
#main {
  min-height: 100%;
}

现在它看起来是这样的：

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|------------------------|

我希望它看起来像这样： 现在它看起来是这样的：

|------------------------|
|==========ROW===========|
|==========ROW===========|
|==========SPACE=========|
|==========SPACE=========|
|==========ROW===========|
|------------------------|
所以我想保持最后一行在底部，我该如何做？
编辑：我不能在第二个div上使用margin-bottom，因为第二行div和最后一行div之间的距离可能会改变，我不想设置高值，因为在13英寸屏幕上页面会出现滚动条。
编辑2：我不能使用position:fixed和bottom:0，因为在#main div下面有其他div（始终为100%高度）。
解决办法1： 我这样做：
<div id="main" style="position: relative;">

在 row div class 中，我执行以下操作：

<div class="row" style="position:absolute; bottom: 0px; width: 100%;">

看起来工作得非常好，但我不知道是否是一个好的解决方案……请给我反馈！

你想让元素固定在网站底部（不可滚动）吗？那么你可以通过 position: fixed; bottom: 0; 进行定位。 - Flixer
但是，在这个div #main之后，我还有其他的div...所以如果我设置了position fixed和bottom: 0，它也会覆盖其他的div。 - Riccardo
这是正确的，在这种情况下，position: fixed 不是正确的解决方案。我无法从你的问题中得出这个事实。 - Flixer
Edited :) Sorry my fault. - Riccardo
4个回答
6
解决方案是将具有类“container”的
添加类“d-flex”、“flex-column”和“h-100”。然后，您需要在最后一个中添加mt-auto。这将为屏幕上剩余的所有空间添加边距。因此，它适用于所有屏幕大小。
另外很重要的一点是，、和所有位于具有类“container”的
上方的元素都使用全高度。可以通过以下CSS实现：
html, body {
  height: 100%;
}


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<style>
html, body, #main {
  height: 100%;
}
</style>

<div id="main">
  <div class="container-fluid d-flex flex-column h-100">
    <div class="row">
      <div class="col-md-12">
        <div class="logo col-centered">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title text-center">THE TITLE</div>
    </div>
    <div class="row">
      <div class="col-md-5 col-centered text-center description">Lorem ipsum</div>
      <div class="description_arrow col-centered"></div>
    </div>
    <div class="row mt-auto mb-3">
      <div class="col-md-5 col-sm-8 col-xs-12 col-centered">
        <div class="image-container">
          <img id="image-phone" src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png" class="img-responsive" style="max-width: 100px; bottom:0px;">
        </div>
      </div>
    </div>
  </div>
</div>

2

我更喜欢创建这样的 spacer 类：

.spacer{
    height: height in %;
}

然后，只需像这样添加 spacer 类：
<div class="row">
<div class="spacer">
<div class="row">

那样，你可以轻松地在行之间拥有一个响应式的空间。
编辑：
如果您的页面不高于1280px，则可以尝试将最后一行固定在页面底部。
.row:last-child {
    position: fixed;
    bottom: 0;
}
1
你的回答或许有帮助，但并没有直接回答 OP 的问题。你提到了如何为间隔硬编码一个特定高度，但是 OP 想要在页面底部有一个“粘性”页脚。 - Zachary Craig
1
如果我理解正确-您不能只向第二行添加margin-bottom以创建第二行和第三行之间的垂直空间吗？
另外请注意，col-12可以只是容器中的div，它们不需要一行或col-12类。
Ok，使用col-12没问题。 但是我不想使用margin-bottom，因为我不知道第二行和最后一行之间的距离是多少...这个距离可能会改变，而且我不希望页面出现滚动条！ - Riccardo
您可能需要使用JavaScript来确定页面的大小和可用的间隙，然后相应地添加“margin-bottom”。 - Whoa
是的，这是一个解决方案...我还写了一个解决方法（你可以在我的问题中看到）。你能给我反馈吗？谢谢。 - Riccardo
0

只需在它们之间插入一个div来添加一些间距，例如：<div class="top-buffer">，并使用以下CSS代码：.top-buffer { margin-top:10px; }。希望这对你有用。

谢谢回复，但我不想设置边距，因为这样屏幕之间的边距就会不同（例如13英寸与27英寸）。 - Riccardo
你可以添加更多的CSS来处理屏幕分辨率，但是Bootstrap已经提供了一切，只要像这样良好地阅读 <div class="sm-visible"></div> 就可以处理屏幕分辨率。 - Aitazaz Khan
使用一些<div class="sm-hidden"></div>，这样您就可以从这些类中解决屏幕分辨率。 - Aitazaz Khan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接