Bootstrap 4：左側帶有圖標的響應式按鈕

Question

無論我做什麼，按鈕都會變得噱頭。太複雜了。它在較小的屏幕上分解，並不表現自然。特別是當我將它包含在一列中時。有人可以告訴我正確和乾淨的方式來做到這一點嗎？我真的需要這樣做，儘可能簡單，當我將它包含在引導程序4中的不同組件中時不會崩潰。

無論如何，這是我的代碼。我正在使用Bootstrap 4和FontAwesome。我故意將它放在一列中，所以你可以看到文本沒有正確對齊。這是正確的方法嗎？

.btn { 
 
\t border: none; 
 
\t padding: 20px; 
 
     text-align: center; 
 
     font-size: 10px; 
 
\t display: inline-block; 
 
\t text-transform: uppercase; 
 
\t position: relative; 
 
     background: #42473d; 
 
\t color: #fff; 
 
    } 
 

 
.btn:before { 
 
\t font-family: 'FontAwesome'; 
 
    position: absolute; 
 
\t left: 0; 
 
\t top: 0; 
 
\t line-height: 2.9; 
 
\t font-size: 18px; 
 
\t width: 50px; 
 
    content: "\f09a"; 
 
    background-color: #292c26; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-3 mb-2"> 
 
    <button class="btn btn-block rounded-0">View Using Facebook</button> 
 
</div> 
 

 
<div class="col-md-3"> 
 
    <button class="btn btn-block rounded-0">Sign in with Facebook</button> 
 
</div>

Answer 1

絕對定位在這種情況下爲.btn:before不是必需的。而不是line-height您應該使用padding來定義區域。調整margin-left和margin-right而不是left和right。

我爲.btn課增加了額外的margin-bottom。如果你不需要它，你可以刪除它。

.btn { 
 
    border: none; 
 
    padding: 20px; 
 
    text-align: center; 
 
    font-size: 10px; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    background: #42473d; 
 
    color: #fff; 
 
    margin-bottom: 5px; 
 
} 
 

 
.btn:before { 
 
    font-family: 'FontAwesome'; 
 
    font-size: 18px; 
 
    padding: 20px; 
 
    margin-left: -20px; 
 
    margin-right: 20px; 
 
    content: "\f09a"; 
 
    background-color: #292c26; 
 
}

<div class="col-md-3 mb-2"> 
 
    <button class="btn btn-block rounded-0">View Using Facebook</button> 
 
</div> 
 

 
<div class="col-md-3"> 
 
    <button class="btn btn-block rounded-0">Sign in with Facebook</button> 
 
</div>

[更新] 萬一按鈕是btn-block;最好使用em單元而不是px。 https://jsfiddle.net/mr6nt5no/4/