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/