Question

我有这样的结构：

<div class=”row”>
    <div class=”col”>
        <div class=”float-to-top”></div>
        <div class=”float-to-bottom></div>
    </div>

    <div class=”col”>
        <div class=”float-to-top”></div>
        <div class=”float-to-bottom></div>
    </div>
</div>

任务是使同一类的div相互对齐。作为Bootstrap 4，两列的高度免费。我可以对齐顶部或底部但是如何垂直“证明”呢？

哦，不允许使用媒体查询；只有Bootstrap设施。

感谢您的帮助。

Answer 1

听起来您想交换行和列。这样您的两个.col类彼此相邻，而您的.float-to-top在顶部（.float-to-bottom在底部）。

如果是这种情况，您正在.col上寻找以下内容：

display: flex利用flexbox
flex-direction: column交换布局
justify-content: space-between将元素隔开（顶部和底部）
使用height在元素之间添加空格

可能：

align-items: center用于水平居中

这可以在下面看到：

.col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  align-items: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col">
    <div class="float-to-top">Top 1</div>
    <div class="float-to-bottom">Bottom 1</div>
  </div>
  <div class="col">
    <div class="float-to-top">Top 2</div>
    <div class="float-to-bottom">Bottom 2</div>
  </div>
</div>

如何在Bootstrap 4栏中垂直对齐

1 个答案: