正确堆叠引导按钮答案

【问题标题】：Stack bootstrap buttons properly正确堆叠引导按钮
【发布时间】：2017-06-14 18:22:15
【问题描述】：

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

^ 这我需要解决，但不明白如何解决。

标题代码：

  <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;
}

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

【问题讨论】：

好像你没有包含一些CSS。您的代码不会复制屏幕截图。 codepen.io/mcoker/pen/LLRBzB
看起来您没有正确使用按钮组。
。关闭 div 应该在按钮之后

标签： html css twitter-bootstrap button

【解决方案1】：

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

我会将您想要组合在另一个元素中的两个按钮包装起来。然后添加一个媒体查询来在内联显示和块显示之间切换。将分组元素设置为 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>

【讨论】：