Question

我是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网格执行此操作？非常感谢任何帮助！

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap - 将行移动到页面底部

2 个答案: