Question

如何将一个fontawesome图标向右浮动并仍然垂直中间对齐？我尝试过使用ml-auto和Flexbox，但它没有用。

这是我的代码：

<ul class="list-group flex-column">
  <li class="list-group-item py-2 d-flex justify-content-start">
    <a href="#">
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>

有人可以帮帮我吗？谢谢！

Answer 1

使用flex和sizing帮助程序类使链接成为flex父项，其中包含2个子项 - 左侧需要的内容和右侧的内容。使用.justify-content-between, .align-items-center分隔内容，使箭头位于右侧并垂直居中。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group flex-column">
  <li class="list-group-item py-2 d-flex">
    <a href="#" class="d-flex w-100 justify-content-between align-items-center">
      <span>
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      </span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>

Answer 2

尝试使用此结构：

<ul class="list-group">
  <li class="list-group-item">
    <a class="w-100 d-flex align-items-center py-2" href="#">
      <img src="https://placehold.it/40x40" height="40" class="mr-4">
      <span>Text Here</span>
      <i class="fa fa-angle-right ml-auto" aria-hidden="true"></i>
    </a>
  </li>
</ul>

Click here看到它在jsfiddle中工作。

您的<a>代码并未填满整个父母，因此您无法看到ml-auto对该图标的影响。此外，d-flex必须位于a代码中，而不是li。

Bootstrap 4：列表中的垂直对齐浮动元素

2 个答案: