图像作为列正在采取巨大的垂直 space

Question

我是 Web 开发的新手，正在尝试使用 Bulma CSS。

我想显示五个图像图标，它们是我 public 个人资料的链接。我希望这些图标排成一行，最好覆盖整个屏幕以用于更大的屏幕（当然有开始和结束填充），而对于较小的屏幕，我宁愿将它们排成两三行（以及三个或两个图标每行）。

到目前为止，我已经能够使用 Bulma 色谱柱实现其中的大部分。对于桌面，图标是排成一排的，不是以链的形式覆盖所有区域，而是在行的中心。对于移动设备，它按预期工作：两行图标覆盖整个屏幕宽度，每行有三个图标。它不是最好的，但它会起作用。

当前输出及其代码如下所示：

输出

代码

<section class="hero is-light">
    <div class="hero-body">

        <h3 class="title is-h3">Important links.</h3>


        <div class="columns is-mobile is-multiline is-centered">
            <a href="link" class="column is-narrow">                 <img src="assets/img/home/email.png"     class="image is-1by1"  height="64" width="64" alt="gmail">     </a>
            <a href="link" class="column is-narrow"> <img src="assets/img/home/linkedin.png"  class="image is-1by1"  height="64" width="64" alt="linkedin">  </a>
            <a href="link" class="column is-narrow">                         <img src="assets/img/home/github.png"    class="image is-1by1"  height="64" width="64" alt="github">    </a>
            <a href="link" class="column is-narrow">         <img src="assets/img/home/medium.png"    class="image is-1by1"  height="64" width="64" alt="medium">    </a>
            <a href="link" class="column is-narrow">                        <img src="assets/img/home/twitter.png"   class="image is-1by1"  height="64" width="64" alt="gmail">     </a>
        </div>


        <div class="columns"><a href="" class="column"> </a></div><!-- empty column group for space -->

        <div class="columns is-mobile is-multiline is-centered">
           <a href="link" class="button is-primary"> Download My Resume . </a>
        </div>

    </div>
  </section>

我的问题是标题“重要链接”和图标之间的space。为什么它们之间有这么大的垂直space？我怎样才能减少它？

我还想知道是否有可能将这些图标显示为 spaced 并覆盖大屏幕的整个宽度；在为较小的屏幕执行当前的多行行为时。

如果所有三样东西（标题、图片和下载按钮）在大屏幕上显示在同一行（例如：开头的标题、中间的图标和和末尾的按钮）和当前的小屏幕解决方案。我想这可能通过导航来实现，但我不确定我们是否应该有一个由导航及其关联的类表示的页脚。也许这里也可以应用网格？

注意：我更喜欢没有 JavaScript/vanilla CSS 的 Bulma CSS 解决方案，但如果不可能，请告诉我。

Answer 1

is-h3 元素有一个 24 像素的底部边距，.columns 元素也有一个边距，这些加起来。你将需要写一些 CSS 来删除这个边距：

.title { margin: 0; }
.columns {margin: 0; }

（您可能应该给他们唯一的选择器，而不是更改所有标题和列。）

图像作为列正在采取巨大的垂直 space

Image as columns are taking a huge vertical space

html

css

bulma

输出

代码