html - 正确堆叠 Bootstrap 按钮

Question

所以我正在制作我的个人网站，并决定添加简历 View (谷歌驱动器链接)和简历下载选项。所以我添加了按钮，并为它们附加了字形图标，并使用了一些自定义 css 使它们适合查找复活节彩蛋按钮。 我在我的电脑上编码并对结果很满意，但我突然想起手机可能无法正确处理它，我是对的。 ^ 这没关系

^ 这我需要修复，但不明白如何修复。

标题代码:

  <header>
        <div class="container">
            <div class="intro-text">
                <div class="intro-lead-in">Hey There!</div>
                <div class="intro-heading">It's Nice To Meet You</div>
                <div class="btn-group"></div>
                <a href="#services" class="page-scroll btn btn-xl ">Find easter eggs</a>
                    <!-- <button type="button" class="btn btn-primary btn-xl"> -->

                       <button type="button" class="btn btn-lg btn-primary padbtn" id='vr'>
  <span class="glyphicon glyphicon-eye-open"></span>&nbsp;
</button>

<!-- ISSUE HERE!! -->

                        <!-- <i class="fa fa-at fa-stack-1x fa-inverse"></i> -->

                    <a download="Resume_Ayush_Mandowara.pdf" href="\pdf\RESUME_14_6_17.pdf"><button type="button" class="btn btn-lg btn-primary padbtn" id='dr'>
  <span class="glyphicon glyphicon-cloud-download"></span>&nbsp;
    </button></a>

            </div>
        </div>
    </header>

应用于下载和查看按钮的 CSS:

.padbtn
{
    padding: 1.1em;
}

我想把查看和下载按钮粘在一起，让它看起来不那么可怕，任何帮助都将不胜感激!谢谢!

Answer 1

由于您使用的是 Bootstrap，因此您可以使用列类，但这似乎更像是一次性的，列可能无法提供您正在寻找的间距/布局。

我会将您想要分组的两个按钮包装在另一个元素中。然后添加媒体查询以在行内和 block 显示之间切换。将分组元素设置为 display: block; 会将其移动到复活节彩蛋按钮下方。

这是一个简化的例子。

.my-btns {
  text-align: center;
}

@media ( min-width: 481px ) {
  .my-btn-group {
    display: inline-block;
  }
}

<div class="my-btns">
  <button>Easter Eggs</button>
  <div class="my-btn-group">
    <button>1</button>
    <button>2</button>
  </div>
</div>