首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Bulma CSS框中不需要的空间

Bulma CSS框中不需要的空间
EN

Stack Overflow用户
提问于 2021-07-17 13:38:18
回答 1查看 94关注 0票数 1

目前,我正在研究bulma css框架。我正在联系我们页面,但有一些多余的空间在那里。我试了很多次,但不知道怎么去除它?我只是分享了下面的问题。这是图像

这是代码

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2021-07-17 22:03:12

只试着用这样的TailwindCSS,

代码语言:javascript
复制
<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>

检查顺风游戏

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68421011

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档