html - 如何在 Bootstrap 中一行应用这个小部件

Question

需要在我的 index.html 文件中应用这个社交媒体图标和 Bootstrap 中的菜单图标

    <ul class="social-media list-inline" align="right">
      <li><a href="#"><span class="fa fa-facebook"></span></a></li>
      <li><a href="#"><span class="fa fa-envelope"></span></a></li>
      <li><a href="#"><span class="fa fa-twitter"></span></a></li>
      <li><a href="#"><span class="fa fa-youtube"></span></a></li>
      <li><a href="#"><span class="fa fa-instagram"></span></a></li>
     </ul>
     <!--end social-->
     <a href="#fh5co-offcanvass" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#fh5co-navbar" aria-expanded="false" aria-controls="navbar"><span>Menu</span> <i></i></a>

我需要一行......

Answer 1

对于 Bootstrap 3:

<ul class="list-inline social-media">
  <li><a href="#"><span class="fa fa-facebook"></span></a></li>
  <li><a href="#"><span class="fa fa-envelope"></span></a></li>
  <li><a href="#"><span class="fa fa-twitter"></span></a></li>
  <li><a href="#"><span class="fa fa-youtube"></span></a></li>
  <li><a href="#"><span class="fa fa-instagram"></span></a></li>
</ul>

引用:http://getbootstrap.com/css/#inline

如果您使用的是 bootstrap 4:

<ul class="list-inline social-media">
  <li class="list-inline-item"><a href="#"><span class="fa fa-facebook"></span></a></li>
  <li class="list-inline-item"><a href="#"><span class="fa fa-envelope"></span></a></li>
  <li class="list-inline-item"><a href="#"><span class="fa fa-twitter"></span></a></li>
  <li class="list-inline-item"><a href="#"><span class="fa fa-youtube"></span></a></li>
  <li class="list-inline-item"><a href="#"><span class="fa fa-instagram"></span></a></li>
</ul>

引用:http://v4-alpha.getbootstrap.com/content/typography/#inline

只需确保您的 .social-media 类的样式不会影响它显示为 block 。