堆棧引導按鈕正確

所以我正在做我的個人網站，並決定添加簡歷視圖（谷歌驅動器鏈接），並恢復下載選項。所以我添加了按鈕，並附加了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

堆棧引導按鈕正確

回答

相關問題