html - Bootstrap 中心图标

Question

我试图复制这个: http://prntscr.com/gutg8b

相反，我得到了这个: http://prntscr.com/gute2v

我使用了 twitter bootstrap，我想知道如何轻松模仿第一个图像，例如图标必须堆叠到链接上，twitter 图标必须在屏幕中央，然后头像和搜索也必须堆叠正确地彼此相邻。

我应该在这里修复什么？

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <i class="fa fa-home fa-lg"></i> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <i class="fa fa-bell-o fa-lg"></i> <a class="nav-link" href="#">Notifications</a>
          </li>
          <li class="nav-item">
            <i class="fa fa-envelope-o fa-lg"></i> <a class="nav-link" href="#">Messages</a>
          </li>
        </ul>

        <div><i class="fa fa-twitter fa-lg"></i></div>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>

        <div><img src="img/avatar.jpg" alt="" style="border-radius: 50%; width: 30px;"></div>
      </div>
    </nav>

Answer 1

将您的 html 更改为:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="pull-left">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <i class="fa fa-home fa-lg"></i> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <i class="fa fa-bell-o fa-lg"></i> <a class="nav-link" href="#">Notifications</a>
                </li>
                <li class="nav-item">
                    <i class="fa fa-envelope-o fa-lg"></i> <a class="nav-link" href="#">Messages</a>
                </li>
            </ul>
        </div>


        <div class="icon-center">
            <i class="fa fa-twitter fa-lg"></i>
        </div>

        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>

        <div>
            <img src="img/avatar.jpg" alt="" style="border-radius: 50%; width: 30px;">
        </div>
    </div>
</nav>

并将其添加到 CSS 中:

.icon-center {
    display: block;
    margin: auto;
}
.nav-link {
    display: inline-block;
}