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

你可以使用＆＃34; pull-right＆＃34;类。它是默认的引导类，通过这种方式，您可以轻松地将文本或内容拉到右侧。

以下是添加课程的方法：

<div class="container">
  <div id="intro" class="pull-right">
    <ul class="list-inline">
      <li><a href="directions.php">Address Goes Here</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>

Answer 2

使用此

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

Answer 3

你需要在“intro”div上添加bootstrap类'text-right'，如下所示：

<div class="container">
  <div id="intro" class="text-right">
    <ul class="list-inline">
      <li><a href="directions.php">Address Goes Here</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>

Answer 4

**add inline style float:right**


 <div class="container">
 <div id="intro" class="text-right" style="float:right">
 <ul class="list-inline">
  <li><a href="directions.php">Address Goes Here</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>

Answer 5

所以，我解决这个问题的方法是，我只是从“简介”ID中取出内容，然后将其放在右侧对齐的导航栏上，这是一个更容易的解决方案。我宁愿在导航栏上方放置一个带有右对齐内容的容器，但我尝试了这里建议的所有内容都无济于事。我很感激大家的回答，你们大家都很棒。

Answer 6

**Try this**
 <ul class="text-right list-inline d-block">
        <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>

Bootstrap右对齐内联<ul>

6 个答案: