Bootstrap-如何将该列移至底部？
我正在尝试使此列在Card框旁边对齐，并在其旁边添加项目名称。我正在尝试使其具有响应性，因此我觉得我需要在超长管底部放置该专栏。我怎样才能做到这一点？ （见图）。感谢所有回答的人，我仍在尝试学习引导程序和CSS。
.jumbotron {
background-image: url("src\app\assets\image.jpg");
background-size: cover;
height: 100%;
border-radius: 0;
}
.whiteColorText {
color: white;
position: absolute;
}
aside .box {
position: relative;
}
aside .card {
position: absolute;
top: 0;
transform: translateY(-100px);
left: 0;
right: 0;
}<div class="backgroundInformation">
<div class="container-fluid">
<div class="row">
<div class="jumbotron col ">
<!-- style="top: 4rem; right: -20em; font-size: 22px;" -->
<!-- position-relative offset-md-8 -->
<p
class="col-6-md whiteColorText "
>
{{projectName}}
</p>
</div>
</div>
<div class="row">
<aside class="col-4">
<div class="box">
<div class="card shadow p-3 mb-5 bg-white rounded">
<img
class="card-img-top"
src="https://picsum.photos/600/200"
alt="Card image cap"
/>
<div class="card-body">
<div class="col">
<h5 class="card-title"><b> About</b></h5>
<p class="card-text">
{{ projectDescription }}
</p>
<h5 class="card-title"><b> Team Members </b></h5>
test1 <br />
test2 <br />
test3
<h5 class="card-title"><b> Interests</b></h5>
<!--
<ul *ngFor="let item of interests">
{{
item
}}
</ul> -->
<ul *ngFor="let item of interests">
<div class="centerObjects">
<ng-container *ngIf="item === 'Music'">
<mat-icon aria-hidden="false"> music_note </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Technology'">
<mat-icon aria-hidden="false"> desktop_mac</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Sports'">
<mat-icon aria-hidden="false"> sports_football</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Art'">
<mat-icon aria-hidden="false"> create </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Fashion'">
<mat-icon aria-hidden="false"> checkroom </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Gaming'">
<mat-icon aria-hidden="false">
sports_esports
</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Education'">
<mat-icon aria-hidden="false"> menu_book</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Business'">
<mat-icon aria-hidden="false"> business</mat-icon>
{{ item }}
</ng-container>
<span> </span>
</div>
</ul>
</div>
</div>
</div>
</div>
</aside>
<main class="col">
itaque quae, minus error blanditiis corrupti optio ullam quidem
necessitatibus. Nulla eveniet unde quod deserunt cupiditate expedita
ducimus reiciendis doloribus, quae officia iusto quo, totam! Quae et
eius quisquam. Vitae quaerat, odit harum nam expedita rem mollitia et,
nihil rerum eos aut quas nostrum adipisci! Laborum nesciunt, ad saepe
voluptatum doloribus aspernatur dolorem! Ratione rerum, in obcaecati,
aliquam est dolor. Eos aliquam pariatur accusantium animi, reiciendis
placeat ducimus beatae sunt reprehenderit numquam unde consequuntur sint
asperiores, quasi saepe vero officiis laudantium. Doloribus possimus
quidem reprehenderit aliquid nemo dolorum perspiciatis laudantium
expedita numquam omnis! Necessitatibus consequuntur debitis minus vel
voluptate minima fugit numquam voluptatibus assumenda ab, omnis quasi
ipsam possimus aut suscipit, temporibus odio quam sit, nemo sed sapiente
facilis corrupti blanditiis. Debitis, quod? Quo, impedit nam nihil
cumque vel magnam facilis accusantium distinctio. Doloremque consequatur
aliquid id? Vero repudiandae delectus laboriosam mollitia provident
odio, numquam earum sequi deleniti recusandae nobis expedita quisquam
nihil ipsa, nam temporibus asperiores. Distinctio ratione ab minima
optio, in numquam perspiciatis asperiores velit perferendis pariatur
voluptate deleniti, veritatis enim ullam nam reprehenderit ipsam sed!
Temporibus molestiae accusamus impedit facilis amet in sed quae facere
sequi repellat quas consequatur aperiam ipsam mollitia, molestias, sit
delectus laudantium aspernatur! Fuga fugit veritatis magnam similique
laboriosam, enim sequi esse quibusdam vero sit laudantium. Repellendus
et, porro! Possimus recusandae doloribus quae unde repellendus aperiam
eligendi qui maiores tempore! Nesciunt numquam quis nihil, quam sequi
cumque quo, natus amet veniam excepturi, repellendus ipsum iure
doloremque? Nostrum cupiditate cum necessitatibus officiis harum
adipisci cumque vero accusamus autem provident quas, ex assumenda
deserunt a fugit quibusdam consequuntur error ratione placeat
perspiciatis fugiat at! Nihil minima fugiat nostrum odio nulla a,
placeat ipsa magnam ad blanditiis illo, aliquam id earum ratione vitae
consectetur, aspernatur adipisci soluta ut reiciendis quisquam
laboriosam. Similique iusto dolor dignissimos architecto animi officia,
facere quidem, sapiente tempore atque sed quisquam! Odio, nemo excepturi
quasi exercitationem. Ipsa saepe quod reiciendis perferendis rerum
officia vero delectus rem placeat commodi vel qui ab nisi doloremque
esse accusantium, inventore similique! Culpa, alias tempora dolorum
nulla veniam eveniet, ea, recusandae omnis quas cupiditate eaque ullam
beatae labore quaerat repellendus explicabo illum impedit tempore
adipisci praesentium consequatur in! Perspiciatis culpa ullam totam
consequatur unde. Harum itaque aliquid, esse fugit ipsam ipsum qui
dolore natus nulla temporibus, suscipit velit omnis. Voluptates labore
impedit consequuntur vel enim sunt iste, neque inventore explicabo et
illum expedita sint. Porro minus omnis enim, quo reprehenderit facere
iusto corporis vero, perspiciatis, suscipit perferendis commodi
accusantium laboriosam aliquam consectetur non soluta voluptatibus
repellat nostrum magnam ullam aliquid nisi unde. Sint, porro velit,
eligendi ea suscipit qui tenetur quos esse. Aspernatur, autem ullam
fugiat quod magni, vitae porro perspiciatis delectus. Aperiam, quos,
maiores? Laudantium, optio omnis perspiciatis obcaecati itaque excepturi
voluptas, culpa atque accusantium veritatis odio dolores saepe illo
incidunt aut eaque modi nihil laborum. Tempora eum placeat omnis
reiciendis cupiditate harum, odio voluptatem numquam corrupti illum
minus dignissimos cum optio. Autem libero cupiditate qui id obcaecati
repudiandae quasi, veniam temporibus ut facilis voluptatibus hic quod
tempore iste eligendi labore et, porro dolore. Voluptates sit, ullam
commodi a amet. Dolorum laboriosam harum quod cupiditate in rem
veritatis saepe tempore, cumque commodi deleniti voluptate, cum quasi
nesciunt incidunt temporibus expedita aut, quisquam omnis facilis odit
sit assumenda. Labore impedit cumque eveniet quae, provident velit, eos,
rem enim esse, natus nisi voluptatum non in. Adipisci sit excepturi,
aperiam. Mollitia assumenda repudiandae ipsam saepe, maxime rerum,
fugiat! Ducimus, beatae ex aliquid! Earum ab voluptas eligendi hic
</main>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
问题是，p元素放置在完全不同的row中。
您需要想象一下。
-------------------------------
[row-1]
-------------------------------
| [row-2]
|
[card] | [text]
|
-------------------------------
现在我要做的是，将臭名昭著的p从第一 row移到了 second row，由两个 columns组成，并放在 second 一个。因此，现在它位于card旁边和文本上方。
<div class="backgroundInformation">
<div class="container-fluid">
<div class="row" style=" height: 100px">
<div class="jumbotron col ">
<!-- style="top: 4rem; right: -20em; font-size: 22px;" -->
<!-- position-relative offset-md-8 -->
</div>
</div>
<div class="row">
<aside class="col-4">
<div class="box">
<div class="card shadow p-3 mb-5 bg-white rounded">
<img
class="card-img-top"
src="https://picsum.photos/600/200"
alt="Card image cap"
/>
<div class="card-body">
<div class="col">
<h5 class="card-title"><b> About</b></h5>
<p class="card-text">
{{ projectDescription }}
</p>
<h5 class="card-title"><b> Team Members </b></h5>
test1 <br />
test2 <br />
test3
<h5 class="card-title"><b> Interests</b></h5>
<!--
<ul *ngFor="let item of interests">
{{
item
}}
</ul> -->
<ul *ngFor="let item of interests">
<div class="centerObjects">
<ng-container *ngIf="item === 'Music'">
<mat-icon aria-hidden="false"> music_note </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Technology'">
<mat-icon aria-hidden="false"> desktop_mac</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Sports'">
<mat-icon aria-hidden="false"> sports_football</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Art'">
<mat-icon aria-hidden="false"> create </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Fashion'">
<mat-icon aria-hidden="false"> checkroom </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Gaming'">
<mat-icon aria-hidden="false">
sports_esports
</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Education'">
<mat-icon aria-hidden="false"> menu_book</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Business'">
<mat-icon aria-hidden="false"> business</mat-icon>
{{ item }}
</ng-container>
<span> </span>
</div>
</ul>
</div>
</div>
</div>
</div>
</aside>
<main class="col">
<div class="block" style="background-color: transparent;">
<p class="col-6-md whiteColorText " >
{{projectName}}
</p>
</div>
<div style="background-color: #fff;">
itaque quae, minus error blanditiis corrupti optio ullam quidem
necessitatibus. Nulla eveniet unde quod deserunt cupiditate expedita
ducimus reiciendis doloribus, quae officia iusto quo, totam! Quae et
eius quisquam. Vitae quaerat, odit harum nam expedita rem mollitia et,
nihil rerum eos aut quas nostrum adipisci! Laborum nesciunt, ad saepe
voluptatum doloribus aspernatur dolorem! Ratione rerum, in obcaecati,
aliquam est dolor. Eos aliquam pariatur accusantium animi, reiciendis
placeat ducimus beatae sunt reprehenderit numquam unde consequuntur sint
asperiores, quasi saepe vero officiis laudantium. Doloribus possimus
quidem reprehenderit aliquid nemo dolorum perspiciatis laudantium
expedita numquam omnis! Necessitatibus consequuntur debitis minus vel
voluptate minima fugit numquam voluptatibus assumenda ab, omnis quasi
ipsam possimus aut suscipit, temporibus odio quam sit, nemo sed sapiente
facilis corrupti blanditiis. Debitis, quod? Quo, impedit nam nihil
cumque vel magnam facilis accusantium distinctio. Doloremque consequatur
aliquid id? Vero repudiandae delectus laboriosam mollitia provident
odio, numquam earum sequi deleniti recusandae nobis expedita quisquam
nihil ipsa, nam temporibus asperiores. Distinctio ratione ab minima
optio, in numquam perspiciatis asperiores velit perferendis pariatur
voluptate deleniti, veritatis enim ullam nam reprehenderit ipsam sed!
Temporibus molestiae accusamus impedit facilis amet in sed quae facere
sequi repellat quas consequatur aperiam ipsam mollitia, molestias, sit
delectus laudantium aspernatur! Fuga fugit veritatis magnam similique
laboriosam, enim sequi esse quibusdam vero sit laudantium. Repellendus
et, porro! Possimus recusandae doloribus quae unde repellendus aperiam
eligendi qui maiores tempore! Nesciunt numquam quis nihil, quam sequi
cumque quo, natus amet veniam excepturi, repellendus ipsum iure
doloremque? Nostrum cupiditate cum necessitatibus officiis harum
adipisci cumque vero accusamus autem provident quas, ex assumenda
deserunt a fugit quibusdam consequuntur error ratione placeat
perspiciatis fugiat at! Nihil minima fugiat nostrum odio nulla a,
placeat ipsa magnam ad blanditiis illo, aliquam id earum ratione vitae
consectetur, aspernatur adipisci soluta ut reiciendis quisquam
laboriosam. Similique iusto dolor dignissimos architecto animi officia,
facere quidem, sapiente tempore atque sed quisquam! Odio, nemo excepturi
quasi exercitationem. Ipsa saepe quod reiciendis perferendis rerum
officia vero delectus rem placeat commodi vel qui ab nisi doloremque
esse accusantium, inventore similique! Culpa, alias tempora dolorum
nulla veniam eveniet, ea, recusandae omnis quas cupiditate eaque ullam
beatae labore quaerat repellendus explicabo illum impedit tempore
adipisci praesentium consequatur in! Perspiciatis culpa ullam totam
consequatur unde. Harum itaque aliquid, esse fugit ipsam ipsum qui
dolore natus nulla temporibus, suscipit velit omnis. Voluptates labore
impedit consequuntur vel enim sunt iste, neque inventore explicabo et
illum expedita sint. Porro minus omnis enim, quo reprehenderit facere
iusto corporis vero, perspiciatis, suscipit perferendis commodi
accusantium laboriosam aliquam consectetur non soluta voluptatibus
repellat nostrum magnam ullam aliquid nisi unde. Sint, porro velit,
eligendi ea suscipit qui tenetur quos esse. Aspernatur, autem ullam
fugiat quod magni, vitae porro perspiciatis delectus. Aperiam, quos,
maiores? Laudantium, optio omnis perspiciatis obcaecati itaque excepturi
voluptas, culpa atque accusantium veritatis odio dolores saepe illo
incidunt aut eaque modi nihil laborum. Tempora eum placeat omnis
reiciendis cupiditate harum, odio voluptatem numquam corrupti illum
minus dignissimos cum optio. Autem libero cupiditate qui id obcaecati
repudiandae quasi, veniam temporibus ut facilis voluptatibus hic quod
tempore iste eligendi labore et, porro dolore. Voluptates sit, ullam
commodi a amet. Dolorum laboriosam harum quod cupiditate in rem
veritatis saepe tempore, cumque commodi deleniti voluptate, cum quasi
nesciunt incidunt temporibus expedita aut, quisquam omnis facilis odit
sit assumenda. Labore impedit cumque eveniet quae, provident velit, eos,
rem enim esse, natus nisi voluptatum non in. Adipisci sit excepturi,
aperiam. Mollitia assumenda repudiandae ipsam saepe, maxime rerum,
fugiat! Ducimus, beatae ex aliquid! Earum ab voluptas eligendi hic
</div>
</main>
</div>
</div>
</div>
您可能还需要对CSS进行些许调整才能使其看起来更好，但是现在它在card元素的旁边“物理上”。
您可以在display: block;元素中添加margin以及一些padding或p。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？