Question

我使用了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;
}

Bootstrap中心图标

1 个答案: