Bootstrap 5 按钮中的文本和 FontAwesome 对齐

Question

我想弄清楚如何使用 Bootstrap 5 按钮来做某事。我希望能够让按钮的文本标签左对齐，FontAwesome 图标右对齐。如果我使用固定宽度的按钮，我如何确保它与所有其他内容一起根据屏幕尺寸缩放？这是我的按钮，但是图标在错误的一边，而且没有任何理由：

            <button type="button" class="btn btn-labeled btn-success">
                <span class="btn-label"><i class="fa fa-angle-right"></i></span>
                Learn More
            </button>

预先感谢大家的帮助！

Answer 1

给你...

button {
  min-width: 20vw;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between">
  <div class="col-10">Learn More</div>
  <div class="col-2"><i class="fa fa-angle-right"></i></div>
</button>

Bootstrap 5 按钮中的文本和 FontAwesome 对齐

Text and FontAwesome alignment in a Bootstrap 5 button

font-awesome

bootstrap-5