正确堆栈引导按钮

Question

所以我正在创建我的个人网站，并决定添加简历视图（谷歌驱动器链接）和恢复下载选项。所以我添加了按钮，并附加了glyphicons，并使用了一些自定义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，因此您可以使用列类，但这看起来更像是一次性而且列可能无法提供您正在寻找的间距/布局。

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

这是一个简化的例子。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;