Question

我正在尝试对齐我的行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===========|
|------------------------|

所以我想保留最后一行，我该怎么做？

编辑：我不能在2°div上使用margin-bottom，因为2°row div和最后一行div之间的距离可以改变，而且我不想要和高值，因为那时候13“屏幕页面变得可滚动。

EDIT2：我不能使用position：fixed和bottom：0，因为在div #main下，我有其他div（总是100％高度）。

替代方法1： 我这样做了：

<div id="main" style="position: relative;">

在行div类我做：

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

似乎工作得很好，但我不知道这是不是一个好的解决方案......请给我一个反馈！

Answer 1

一种解决方案是，如果将具有类div，d-flex和flex-column的类容器添加到h-100。

然后，您需要从mt-auto到最后一个row。这样会将余量添加到屏幕上剩余的所有空间。因此，这适用于所有屏幕尺寸。

同样重要的是html，body以及div类以上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>

Answer 2

如果我理解正确 - 你不能只在第二行添加margin-bottom来创建第二行和第三行之间的垂直空间吗？

另请注意，col-12可以只是容器内的div，它们不需要行或col-12类。

Answer 3

只需在<div class="top-buffer">之类的行之间添加一个div，并且css在这里.top-buffer { margin-top:10px; }，就可以在它们之间添加一些边距。我希望它能为你效果。

Answer 4

我更喜欢像这样创建一个spacer类：

.spacer{
    height: height in %;
}

然后只需添加spacer类，如下所示：

<div class="row">
<div class="spacer">
<div class="row">

这样，您可以轻松地在行之间建立一个响应的空间。

编辑：

如果您的页面不高于1280px，您可以尝试将最后一行粘贴到页面底部

.row:last-child {
    position: fixed;
    bottom: 0;
}

如何在引导程序中与行底部对齐？

4 个答案: