Question

伙计们，我被困在顶部的信息栏中，可以在其中放置所有必要的详细信息，例如电话号码，邮件ID和一些社交图标，并且我正在使用Bootstrap 4.1.3和Font-awesome 5.5，但无论何时尝试使用将超链接放到该图标之后，下一行。如何正确对齐一行。我尝试了很多方法，但到目前为止没有结果。

请检查代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Anything</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" />
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="top-info d-sm-none d-md-block">
        <div class="col-md-8">
          <ul class="list-inline">
            <li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span></li>
            <li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span></li>
            <li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span></li>
          </ul>
        </div>
        <div class="col-md-4">
          <i class="fas fa-sign-in-alt"></i><span><a href="#">Login</a></span>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

</html>

Answer 1

我更改了您代码中的某些内容，我在错误的div中添加了类col-md-8，因此代码就是这个<div class="col-md-8">。您也可以在https://codepen.io/ekk0/pen/xyOoBB?editors=1000处检查结果。我的猜测是，因为最初您使用的是col-md-4，所以这会有些问题。希望对您有帮助！

Answer 2

像这样在span标签中添加i标签

<span> <i class="fas fa-sign-in-alt"><a href="#">Login</a></i></span> https://jsfiddle.net/isubhamb/jztosgbd/13/

超链接位于字体真棒图标的下方。如何将其内联？

2 个答案: