堆栈引导按钮正确

所以我正在做我的个人网站，并决定添加简历视图（谷歌驱动器链接），并恢复下载选项。所以我添加了按钮，并附加了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; 
}

我要坚持的观点和下载按钮在一起，使它看起来不那么可怕，任何帮助表示赞赏！谢谢！

来源

2017-06-14 Ayush Mandowara

好像你没有包括一些CSS。您的代码不会复制屏幕截图。 https://codepen.io/mcoker/pen/LLRBzB –

看起来你没有正确使用按钮组。

。关闭div应该在按钮之后 – Simon

由于您正在使用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>

来源

2017-06-14 18:51:34 hungerstar

堆栈引导按钮正确

回答

相关问题