如何解决Bulma CSS 框中不需要的空间
目前我正在研究 bulma css 框架。我正在制作与我们联系的页面,但那里有一些不需要的空间。我试了很多,但不知道如何删除它? 我只是分享了以下问题的图像。 This is Image
这是代码
<section class="p-5">
<div class="columns is-desktop box has-background-grey-light m-0">
<div class="column">
<div class="has-text-centered">
<div class="box">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Our Address</p>
<p class="m-2">A108 Adam Street,New York,NY 535022</p>
</div>
<div class="columns is-desktop m-0">
<div class="column box">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Email Us</p>
<p class="m-2">info@example.com
contact@example.com</p>
</div>
<div class="column box ml-5">
<span class="icon m-4">
<i class="fas fa-map-marker-alt fa-2x has-text-primary"></i>
</span>
<p class="is-size-5 has-text-weight-medium has-text-grey">Call Us</p>
<p class="m-2">+1 5589 55488 55<br />
+1 6678 254445 41</p>
</div>
</div>
</div>
</div>
<div class="column">
<div class="box">
</div>
</div>
</div>
</section>
解决方法
只尝试像这样使用 TailwindCSS,
<section class="flex w-full flex-col bg-gray-300 text-xl">
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Our Address</span>
<div class="flex flex-col md:flex-row items-center">
<span> A108 Adam Street,</span>
<span>New York,NY 535022</span>
</div>
</div>
<div class="flex flex-col md:flex-row justify-around w-full">
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Email Us</span>
<span>info@example.com</span>
<span>contact@example.com</span>
</div>
<div class="flex flex-col items-center bg-white m-10 rounded-xl p-6 space-y-2 w-auto md:w-full">
<img class="w-10 h-10" src="https://img.icons8.com/fluent/48/000000/map-pin.png" />
<span class="font-bold">Call Us</span>
<span>+1 5589 55488 55</span>
<span>+1 6678 254445 41</span>
</div>
</div>
</section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。