Question

我有两列布局，左边一个元素，右边两个。

如何使右列中的最后一个元素相对于左列的底部对齐？

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>Bare - Start Bootstrap Template</title>

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

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
  <div class="container">
    <a class="navbar-brand" href="#">Start Bootstrap</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Page Content -->
<div class="container-fluid">
  <div class="row">
      <div class="col-7">
          <div class="card card-block">
              <h3>Column 1</h3>
              <br />
              <br />
              <br />
              <p>..end of content</p>
          </div>
      </div>

      <div class="col-5">
          <div class="row no-gutters">
              <div class="col-12">
                <div class="card card-block">
                  <h3>Column 2</h3>
                </div>
              </div>

              <div class="col-12 align-self-end">
                <div class="card card-block">
                  <h3>Column 3</h3>
                </div>
              </div>
          </div>
      </div>
  </div>
</div>

<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>

</html>

谢谢您的帮助！

Answer 1

通过将.align-items-end添加到父行，它会将各列垂直对齐到其底部。

如果您想在顶部放置第3列，但保留第4列的当前位置，我建议您看一下一个名为eqHeight的jQuery库。这样，您就可以将父列（col-7和col-5）拉伸到相同的高度，此后，第3列应在第1列的顶部。

<!-- Page Content -->
<div class="container-fluid">
  <div class="row align-items-end">
      <div class="col-7">
          1<br>
          <br>
          <br>
          2
      </div>

      <div class="col-5">
          <div class="col-12">
              3
          </div>

          <div class="col-12 align-self-end">
              4
          </div>
      </div>
  </div>
</div>

Answer 2

library(geosphere)
library(dplyr)


person_location <-
  structure(list(id = c(1, 2, 3, 4, 5), 
                 longitude = c(-76.67707, -76.44519, -76.69402, -76.68936, -76.58341), 
                 latitude = c(39.399754, 39.285084, 39.36958, 39.369907, 39.357994)), 
            class = "data.frame", row.names = c(NA, -5L))
building_location <-
  structure(list(id_building = c(1, 2, 3, 4, 5, 6, 7, 8, 9), 
                 longitude_building = c(-76.624393, -76.457246, -76.711729, -76.631249, -76.566742, -76.683106, -76.530232,  -76.598582, -76.691287), 
                 latitude_building = c(39.246464, 39.336996, 39.242936,39.289103, 39.286271, 39.35447, 39.332398, 39.344642, 39.292849)), 
            class = "data.frame", row.names = c(NA, -9L))

all_locations <- merge(person_location, building_location, by=NULL)

all_locations$distance <- distHaversine( 
  all_locations[, c("longitude", "latitude")],
  all_locations[, c("longitude_building", "latitude_building")]
  )

closest <- all_locations %>% 
  group_by(id) %>% 
  filter( distance == min(distance)  ) %>% 
  ungroup()

Created on 2020-01-07 by the reprex package (v0.3.0)

Bootstrap two column layout

Why not use different row for 1 - 3  and 2 - 4.
Because you have using bootstrap grid system. 

7 col - 5 col
-------------

Answer 3

这可能是您想要的：

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        3
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        2
    </div>
    <div class="col-md-6">
        4
    </div>
</div>

OR

<div class="row">
    <div class="col-md-6">
        1
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                2
            </div>
            <div class="col-md-12">
                3
            </div>
        </div>
    </div>
</div>

Answer 4

<div class="col-5">
            <row class="no-gutters">
                <div class="col-lg-12">
                    3
                </div>

                <div class="col-lg-12">
                    4
                </div>
            </row>
        </div>

在任何屏幕尺寸下都将全角显示。

Bootstrap 4-将div垂直对齐到列的底部

4 个答案: