html - Bootstrap 右对齐内联 <ul>

Question

我正在尝试找到一种解决方案来右对齐包含内联无序列表的容器的内容。我遇到的问题是我的列表包含混合内容(文本、链接和图标)。

    <!-- Header -->
<div class="container">
  <div id="intro" class="text-right">
    <ul class="list-inline">
      <li><a href="directions.php">5420 Bond Road, Louisville, MS 39339</a></li>
      <li><a href="#"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></a></li>
    </ul>
  </div>
</div>

<!-- Nav Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.php">MCBC Louisville</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>

Answer 1

使用这个

<ul class="text-right list-inline">