所以我已经尽力了,但是我仍然无法获得想要的东西。
我有一个包含min-height: 100px;
和height: 100%
的容器。在那个容器中,我有两行。见下图。 我希望第2行位于容器的末尾
这是代码:
<div class="container-fluid full-height">
<div class="row"> <!-- ROW 1 -->
<div class="col-12 item-title bg-info">
<h2> Fortress </h2>
</div>
<div class="col-12 item-description bg-danger">
Niš Fortress is a fortress in the city of Niš,Serbia. It is a complex and important cultural and
historical monument. It rises on the right bank of the Nišava River,overlooking the area inhabited
for longer than two millennia.
It was protected by law in May 1948 as it was declared a cultural site of great significance. The
current condition of the fortress lists it as one of the best preserved fortifications of this kind
in Serbia as well as on the Balkan Peninsula.
</div>
</div>
<div class="row"> <!-- ROW 2 -->
<div class="col-xl-6 col-md-8 col-sm-12 bg-info">
<div class="container-fluid no-lf-padding">
<div class="row">
<div class="col-6">
Work hours:
</div>
<div class="col-6">
Monday 12:00 - 16:00
</div>
<div class="col-6">
Tuesday 12:00 - 16:00
</div>
<div class="col-6">
Wednesday 12:00 - 16:00
</div>
<div class="col-6">
Thursday 12:00 - 16:00
</div>
<div class="col-6">
Friday 12:00 - 16:00
</div>
<div class="col-6">
Saturday 12:00 - 16:00
</div>
<div class="col-6">
Sunday 12:00 - 16:00
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-md-4 col-sm-12 bg-warning">
<div class="container-fluid no-lf-padding">
<div class="row">
<div class="col-12">
Adress
</div>
<div class="col-12">
Phone
</div>
<div class="col-12">
Website
</div>
</div>
</div>
</div>
</div>
</div>
这是CSS:
.no-lf-margin {
margin-left: 0;
margin-right: 0;
}
.no-lf-padding {
padding-left: 0;
padding-right: 0;
}
/*HERE IS FOR THE CONTAINER*/
.full-height {
min-height: 100%;
height: 100%;
}
我尝试过:
- 将
align-items-end
添加到第2行,没有任何变化。 - 创建一个
<div class="container align-self-end"> ROW AND CODE HERE </div>
,尝试将align-self-end保留下来,没有变化。
我想念什么?
这是JSFiddle:https://jsfiddle.net/a1e0htsw/