gpt4 book ai didi

html - Bootstrap 卡片垂直对齐

转载 作者:太空宇宙 更新时间:2023-11-04 06:19:25 26 4
gpt4 key购买 nike

我想垂直对齐一些引导卡。我需要这个来响应。我试图将父 div 的宽度设置得更小,但这对我没有用。我有什么:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="news newspage">
<h4 class="heading">Nieuws</h4>

<div class="card">
<div class="card-body">
<h4 class="card-title">Foo Bar</h4>
<div class="card-subtitle">
<span class="eventdate">
<i class="fa fa-calendar-alt"></i> Geplaatst op d MMMM yyyy
</span>
</div>
<div class="card-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<a href="#" class="card-link"> > Lees het hele bericht</a>
</div>
</div>

<div class="card">
<div class="card-body">
<h4 class="card-title">Foo Bar</h4>
<div class="card-subtitle">
<span class="eventdate">
<i class="fa fa-calendar-alt"></i> Geplaatst op d MMMM yyyy
</span>
</div>
<div class="card-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<a href="#" class="card-link"> > Lees het hele bericht</a>
</div>
</div>



</div>

感谢所有帮助!

最佳答案

您可以将它们放在行和列中,行将垂直堆叠。如果你想要一个特定的宽度,你可以使用 col-* 类之一

<div class="news newspage">
<h4 class="heading">Nieuws</h4>
@foreach (var _news in Model.News)
{
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="card-title">@_news.NewsTitle</h4>
<div class="card-subtitle">
<span class="eventdate">
<i class="fa fa-calendar-alt"></i> Geplaatst op @_news.PostedOn.ToString("d MMMM yyyy")
</span>
</div>
<div class="card-text">
<p>
@_news.NewsArticle
</p>
</div>
<a href="#" class="card-link"> > Lees het hele bericht</a>
</div>
</div>
</div>
</div>
}
</div>

关于html - Bootstrap 卡片垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55634482/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com