Bootstrap 3：在第一次包裝之後垂直堆疊按鈕？

我正在使用Font Awesome圖標構建帶有社交按鈕的登錄頁面。在較大的設備上，按鈕水平顯示爲彼此相鄰，但當我調整屏幕大小時，最右邊的按鈕在列變得太寬時會覆蓋在另外兩個按鈕下方。我希望按鈕垂直堆疊並展開以填充列的空間，而不是在下面放置錯位的按鈕。我嘗試了一種使用媒體查詢的方法，但它有點不方便，我恐怕不容易維護，所以我抓住了這個想法。Bootstrap 3：在第一次包裝之後垂直堆疊按鈕？

這是我到目前爲止有：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-8"> 
 
    <div class="row"> 
 
     <button id="login" class="btn btn-default">Login</button> 
 
     <button id="facebook" class="btn btn-default"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button> 
 
     <button id="google" class="btn btn-default"><span class="fa fa-google fa-lg"></span> Google Login</button> 
 
    </div> 
 
    </div> 
 
</div>

上如何處理這個有什麼建議？

來源

2016-12-29 slightlyoverwhelmed

你有兩種選擇。在我看來，媒體的質疑將是最乾淨的，但這裏的選項：

1）添加媒體查詢和定位一類特殊的，你可以添加，只是這些按鈕：

@media screen and (max-width: 768px){ 
 
    .loginBtns { 
 
     width:100%; 
 
     display:block; 
 
     margin: 10px 0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-8 col-xs-12"> 
 
     <div class="row"> 
 
      <button id="login" class="btn btn-default loginBtns">Login</button> 
 
      <button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button> 
 
      <button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button> 
 
     </div>  
 
    </div> 
 
</div>

2）複製按鈕並在小屏幕上隱藏一個版本，同時顯示另一個版本。我不喜歡複製代碼，所以我不會推薦這個選項，但如果你不喜歡媒體查詢，它可能是一個選項。

.loginBtns2 { 
 
    width:100%; 
 
    margin: 5px 0; 
 
}


 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="form-group"> 
 
    <div class="col-sm-offset-2 col-sm-8 hidden-xs"> 
 
     <div class="row"> 
 
      <button id="login" class="btn btn-default loginBtns">Login</button> 
 
      <button id="facebook" class="btn btn-default loginBtns"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button> 
 
      <button id="google" class="btn btn-default loginBtns"><span class="fa fa-google fa-lg"></span> Google Login</button> 
 
     </div>  
 
    </div> 
 
    <div class="col-xs-12 visible-xs"> 
 
    <div class="row"> 
 
     <button id="login" class="btn btn-default loginBtns2">Login</button> 
 
    </div> 
 
    <div class="row"> 
 
     <button id="facebook" class="btn btn-default loginBtns2"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button> 
 
    </div> 
 
    <div class="row"> 
 
     <button id="google" class="btn btn-default loginBtns2"><span class="fa fa-google fa-lg"></span> Google Login</button> 
 
    </div> 
 
</div>

這裏是一個正在與這兩個選項也codepen：根據需要 https://codepen.io/egerrard/pen/woVEJW

來源

2016-12-30 00:15:19

真棒，溶液1部作品！我在某一點有兩個組合，但它有點古怪，如果我以後再回來的話，它會是頭疼的。再次感謝 – slightlyoverwhelmed

不知道這是否有幫助。但試試這個..

<div class="container"> 
    <div class="row text-center"> 
     <div class="col-md-6"> 
      <button id="login" class="btn btn-default">Login</button> 
      <button id="facebook" class="btn btn-primary"><span class="fa fa-facebook fa-lg"></span> Facebook Login</button> 
      <button id="google" class="btn btn-danger"><span class="fa fa-google fa-lg"></span> Google Login</button> 
     </div> 
    </div> 
</div>

來源

2016-12-30 00:12:25

Bootstrap 3：在第一次包裝之後垂直堆疊按鈕？

回答

相關問題