Bootstrap - 将行移动到页面底部答案

【问题标题】：Bootstrap - Move rows to bottom of pageBootstrap - 将行移动到页面底部
【发布时间】：2017-05-23 19:17:37
【问题描述】：

我是 Bootstrap 的新手，想将我的 box2 和 box3 div 移动到页面右侧列的底部。如果不求助于box2 和box3 上方的空行，我似乎无法弄清楚如何做到这一点。这是我目前的html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <style type="text/css">

        .jumbotron {
            text-align: center;
            padding-bottom: 5px;
        }

        h2 {
            margin: auto;
        }

        .box1 {
            min-height: 450px;
            border-style: dotted;
        }

        .box2 {
            min-height: 150px;
            margin-bottom: 10px;
            border-style: dotted;
        }

        .box3 {
            min-height: 30px;
            border-style: dotted;
        }
        </style>

    </head>
    <body style="background:pink;">
          <div class="jumbotron" style="background:pink;">
              <h2>Lyrical</h2>
          </div>

          <div class="container-fluid">

              <div class="row">
                  <div class="col-lg-6 col-lg-offset-3">
                      <div class="box1">FORM</div>
                  </div>

                  <div class="col-lg-3">
                      <div class="row">
                          <div class="col-lg-12">
                              <div class="box2">Description</div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-lg-12">
                              <div class="box3">Credits</div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </body>
</html>

有没有办法使用 Bootstrap 网格来做到这一点？非常感谢任何帮助！

【问题讨论】：

标签： html css twitter-bootstrap alignment

【解决方案1】：

试试这个

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
        $(document).ready(function(){
            var bottom1 = $('.box1').outerHeight(true);
            var bottom2 = $('.right-sides-columns').outerHeight(true);
            var topheight = bottom1 - bottom2;
            $('.right-sides-columns').css("margin-top", topheight + "px");
        });
        </script>
        <style type="text/css">

        .jumbotron {
            text-align: center;
            padding-bottom: 5px;
        }

        h2 {
            margin: auto;
        }

        .box1 {
            min-height: 450px;
            border-style: dotted;
        }

        .box2 {
            min-height: 150px;
            margin-bottom: 10px;
            border-style: dotted;
        }

        .box3 {
            min-height: 30px;
            border-style: dotted;
        }
        </style>

    </head>
    <body >
          <div class="jumbotron" >
              <h2>Lyrical</h2>
          </div>

          <div class="container-fluid">

              <div class="row">
                  <div class="col-lg-6 col-lg-offset-3">
                      <div class="box1">FORM</div>
                  </div>

                  <div class="col-lg-3 right-sides-columns">
                      <div class="row">
                          <div class="col-lg-12">
                              <div class="box2">Description</div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-lg-12">
                              <div class="box3">Credits</div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </body>
      </html>

【讨论】：

感谢您的回复。这可行，但是因为位置是absolute，所以在调整页面大小时它不会缩放。有没有办法做同样的事情，但保持调整大小？
@ggordon 我已经更新了我的答案。添加脚本来实现它。

【解决方案2】：

不是特定的引导答案，而是更通用的方法：

可以使用flexbox's align-self 将元素推送到其父元素的底部。

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 300px;
}
.flex-col {
  background: rebeccapurple;
}
.flex-col--end {
  align-self: flex-end;
}

<div class="flex-row">
  <div class="flex-col">
    <p>Lorem Ipsum</p>
  </div>
  <div class="flex-col flex-col--end">
    <p>Dolor Sit</p>
  </div>
</div>

【讨论】：