引导4col垂直对齐不按预期工作[重复]
阅读引导文档，您可以看到对齐示例部分。
它告诉您可以使用use flexbox对齐实用工具以引导CSS类的形式垂直和水平对齐列align-items-start、align-items-center和align-items-end，但是当我尝试它时，内容并没有像预期的那样垂直对齐全高容器，请参见下面的代码：
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>我希望在容器的垂直中间有align-items-center内容，在容器的底部有align-items-end内容。
我做错了什么还是误解了什么？
共有1个答案
为了垂直对齐flex-container中的项，需要将height指定为flex-container。
.row{
min-height:100px;
}
html,
body {
height: 100%;
}
.fill {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: lightblue;
}
.col {
border: 1px solid red;
}
.row{
min-height:100px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container fill">
<div class="row align-items-start">
<div class="col text-center">
align-items-start
</div>
</div>
<div class="row align-items-center">
<div class="col text-center">
align-items-center
</div>
</div>
<div class="row align-items-end">
<div class="col text-center">
align-items-end
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>-
问题内容： Font font = Font(“Arial”, Font.BOLD, 35); 这将创建一个JLabel，在其上方和下方都有一个额外的空间。我试过了，但是没有用。同样，我不想将JLabel对齐到顶部，但是JLabel内的文本应该对齐到 顶部。 问题答案： 标签中的文本实际上已经与顶部对齐。即使您设置 了以下三个条件： 您仍然会发现差距。 问题与字体指标有关。字体留给变音符号使用的空
-
我使用的是Bootstrap v3.2.0，我的html结构如下： 我试图使标题-卖家-配置文件类内的内容对齐到底部，但它根本不起作用，它一直坚持到顶部。
-
垂直对齐 1. grid-template-areas 属性值保持换行，并使用空格保持每列垂直对齐。 例如： .foo { grid-template-areas: "header header" "nav main" "footer ...."; } 2. grid、grid-template
-
我试图使用bootstrap 4集中一个面板，我使用了Align-Items-Centre，但我没有成功。我已经添加了h-100，仍然继续在页面顶部的标题。有人知道会出什么问题吗？我在用angular 4和bootstrap `
-
所以我对bootstrap是新手，我刚刚尝试了文档中的一个示例，它并没有像预期的那样显示出来。 输出应该如下所示。（如果你看不到图像，它是三个div和“三列中的一列”对齐左上角、中央和右下角） 但我得到的只是三个并列的DIV。 我是不是漏掉了什么？