html - 为什么元素永远不会去我想去的地方？

Question

我正在尝试使用 bootstrap 制作一个简单的导航栏，但一切似乎都搞砸了。我已经尝试了几个小时，但事情并不在正确的地方。

我想要左侧和右侧的箭头跨度我想要一个搜索栏，一个带有图像的下拉菜单和一些将用于制作时钟的文本..

谁能检查为什么我的代码没有这样做？

是这样的:http://prntscr.com/ikcdyx

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">


<nav id="top-menu" class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row">
  <div class="navbar-menu-wrapper d-flex align-items-center">
    <button id="menuToggler" class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3" type="button" data-toggle="minimize">
            <span id="navbar-icon" class="fa fa-arrow-left">Arrow Icon</span>
        </button>
    <ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
      <li>
        <div class="search">
          <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search" />
          <button type="submit" class="btn btn-primary btn-sm"><span class="fa fa-search">Search Icon</span></button>
        </div>
      </li>
      <li>
        <div class="dropdown user-menu">
          <a class="dropdown-toggle topbar-user" id="navbar-user" data-toggle="dropdown">
            <img src="https://www.atomix.com.au/media/2015/06/atomix_user31.png" width="40" height="40" alt="" />
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-user">
            <a class="dropdown-item" href="#"><span class="fa fa-user"></span> Profile</a>
            <a class="dropdown-item" href="settings"><span class="fa fa-cog"></span> Settings</a>
            <a class="dropdown-item" href="#"><span class="fa fa-question"></span> Help</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" onclick="logout()"><span class="fa fa-sign-out"></span> Sign out</a>
          </div>
        </div>
      </li>
      <li>
        <h5 id="clock">This will be the clock</h5>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您正在使用 bootstrap 3 中不可用的类名。包括 bootstrap 4 并且看起来已经更好了。希望这会有所帮助。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">



<nav id="top-menu" class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse d-flex flex-row">
  <div class="navbar-menu-wrapper d-flex align-items-center">
    <button id="menuToggler" class="navbar-toggler navbar-toggler hidden-md-down align-self-center mr-3" type="button" data-toggle="minimize">
            <span id="navbar-icon" class="fa fa-arrow-left">Arrow Icon</span>
        </button>
    <ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
      <li>
        <div class="search">
          <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search" />
          <button type="submit" class="btn btn-primary btn-sm"><span class="fa fa-search">Search Icon</span></button>
        </div>
      </li>
      <li>
        <div class="dropdown user-menu">
          <a class="dropdown-toggle topbar-user" id="navbar-user" data-toggle="dropdown">
            <img src="https://www.atomix.com.au/media/2015/06/atomix_user31.png" width="40" height="40" alt="" />
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-user">
            <a class="dropdown-item" href="#"><span class="fa fa-user"></span> Profile</a>
            <a class="dropdown-item" href="settings"><span class="fa fa-cog"></span> Settings</a>
            <a class="dropdown-item" href="#"><span class="fa fa-question"></span> Help</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" onclick="logout()"><span class="fa fa-sign-out"></span> Sign out</a>
          </div>
        </div>
      </li>
      <li>
        <h5 id="clock">This will be the clock</h5>
      </li>
    </ul>
  </div>
</nav>