【发布时间】：2021-07-19 21:23:15
【问题描述】：
我想在我的网站上对齐我的元素，就像我附上的图片一样。
我想用 col 和row-span 用HTML 中的表实现类似你可以做的事情。
我正在使用bootstrap 4。
我试图让它在同一行，但它不适合引导程序允许的 12 列，也因为轮播而不能适合。
我是初学者，我找不到解决方案。
感谢您的帮助。
图片：
HTML 代码：
<div class="container-fluid">
<div class="row"> <!-- Welcome text -->
<div class="col-lg-12">
<p class="h1 text-center p-2">Üdvözöljük Városunk weboldalán!</p>
</div>
</div>
<div class="row"> <!--First row-->
<div class="col-lg-6 col-md-12 p-1"> <!-- Slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block " src="public/IMG/center/kozpont_1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block " src="public/IMG/strand/strand_1.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block " src="public/IMG/strand/strand_3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Előző</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Következő</span>
</a>
</div>
</div>
<div class="col-lg-2 col-md-4 p-1"> <!-- Turizmus -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Turizmus</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">Eseménynaptár</a></li>
<li><a href="#" class="card-link">Elhelyezkedés</a></li>
<li><a href="#" class="card-link">Látnivalók, nevezetességek</a></li>
<li><a href="#" class="card-link">Strandfürdő</a></li>
<li><a href="#" class="card-link">Szálláshelyek</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 p-1"> <!-- Gyorslinkek -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Gyorslinkek</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">A Polgármesteri Hivatal ügyfélfogadása</a></li>
<li><a href="#" class="card-link">Rendelettár</a></li>
<li><a href="#" class="card-link">Képviselő-testület</a></li>
<li><a href="#" class="card-link">A Jász-Nagykun-Szolnok Megyei Kormányhivatal Járási Hivatala</a></li>
<li><a href="#" class="card-link">Háziorvosok, fogorvosok rendelési ideje</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 p-1"> <!-- Hírdetmények -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Hirdetmények</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">Térfigyelő rendszer</a></li>
<li><a href="#" class="card-link">WIFI pontok</a></li>
<li><a href="#" class="card-link">Beruházások</a></li>
<li><a href="#" class="card-link">Pályázatok</a></li>
<li><a href="#" class="card-link">Közérdekű információk</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- End of first row-->
<div class="row"><!--Second row-->
<div class="col-lg-2 col-md-4 p-1"> <!-- Hírdetmények -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Hirdetmények</h5>
<ul class="list-group ">
<li><a href="#" class="card-link">Térfigyelő rendszer</a></li>
<li><a href="#" class="card-link">WIFI pontok</a></li>
<li><a href="#" class="card-link">Beruházások</a></li>
<li><a href="#" class="card-link">Pályázatok</a></li>
<li><a href="#" class="card-link">Közérdekű információk</a></li>
</ul>
</div>
</div>
</div>
</div><!-- End of second row-->
【问题讨论】：
标签： html css bootstrap-4