下一部分是下面的
我用容器制作卡片,
这是我的代码 我在本节旁边进行了新的部分。但是下一节在本节下方。 下一节的原因是上一节,顺便说一句,我正在使用Bootstrap 5
<div class="container-fluid room">
<h2 class="room-section-title text-center"> Our Rooms</h2>
<div class="container d-flex justify-content-evenly align-items-center flex-md-column flex-lg-row flex-column ">
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Superior Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Deluxe Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Suite Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
</div>
</div>
I make card wrap by container
here is my code
i make new section next to this section.. but next section is below this section..
what makes next section is below previous section, btw i am using bootstrap 5
<div class="container-fluid room">
<h2 class="room-section-title text-center"> Our Rooms</h2>
<div class="container d-flex justify-content-evenly align-items-center flex-md-column flex-lg-row flex-column ">
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Superior Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Deluxe Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
<div class="card mx-3">
<img src="/assets/images/room/Deluxe.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Suite Room</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="btn">
<a class="text-primary text-decoration-none" href="#">Room detail</a>
</div>
</div>
</div>
</div>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您必须提供整个文件。然后只有我们可以回答。
You have to provide the whole file. Then only we can answer it.