Question

无论我做什么，按钮都会出现噱头。太复杂了。它在较小的屏幕上分离，并且根本不表现自然。特别是当我把它包含在一个列中时。有人可以告诉我正确而干净的方法吗？我真的需要它尽可能简单，当我将它包含在Bootstrap 4中的不同组件中时，它不会崩溃。

无论如何，这是我的代码。我正在使用Bootstrap 4和FontAwesome。我故意将它放在一个列中，因此您可以看到文本，例如，中心没有正确对齐。这是正确的方法吗？

.btn {
	  border: none;
	  padding: 20px;
      text-align: center;
      font-size: 10px;
	  display: inline-block;
	  text-transform: uppercase;
	  position: relative;
      background: #42473d;
	  color: #fff;
  }

.btn:before {
	font-family: 'FontAwesome';
    position: absolute;
	left: 0;
	top: 0;
	line-height: 2.9;
	font-size: 18px;
	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和margin-bottom。

我已向.btn课程添加了额外的.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; }。如果您不需要，可以将其删除。

＆＃13;

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

＆＃13;

btn-block

＆＃13;

[更新] 如果按钮是em;最好使用px单位而不是fnl list = [x | x <- list, x==list!!((length list)-1)]。 https://jsfiddle.net/mr6nt5no/4/

Bootstrap 4：响应按钮左侧有一个图标

1 个答案: