ブートストラップボタンを正しくスタックする

Question

個人的なウェブサイトを作っていて、履歴書の表示（Googleドライブリンク）を追加してダウンロードオプションを再開することに決めました。そこでボタンとグリフコンを追加し、カスタムのCSSを使用して、イースターエッグの検索ボタンに合わせました。 私は自分のPCでコード化して結果に満足していましたが、突然電話機が正しく処理できないかもしれないと思い、私は正しいと思いました。 ^これは

OKです^この私が修正する必要がありますが、どのように理解することはできません。

ヘッダーのためのコード：

<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

ブートストラップを使用しているので、列クラスを使用することができますが、これは一見外れているように見え、列はあなたが探している間隔/レイアウトを提供しない可能性があります。

別の要素にグループ化したい2つのボタンをラップします。次に、インライン表示とブロック表示を切り替えるメディアクエリを追加します。グループ化要素をdisplay: block;に設定すると、Easter Eggボタンの下に移動します。

ここでは簡単な例を示します。

.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>