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

发布于 2025-01-08 23:56:31 字数 422 浏览 2 评论 0原文

我正在尝试弄清楚如何使用 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>

提前感谢大家的帮助！

原文

I am trying to figure out how to do something with a Bootstrap 5 button. I would like to be able to have the text label of the button left-justified and the FontAwesome icon right-justified. If I use a fixed-width button, how do I make sure it scales according to screen size along with all of the other content?
Here's my button now, but the icon is on the wrong side, and nothing is justified:

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

Thank you in advance for your help, everyone!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傲性难收 2025-01-15 23:56:31

干得好...

button {
  min-width: 20vw;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Here you go...

button {
  min-width: 20vw;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

回复收藏 0 原文

~没有更多了~