如何在引導程序的導航欄中對齊元素？

Question

我正在為可折疊的導航欄使用一些自定義引導CSS（ https://github.com/IronSummitMedia/startbootstrap/tree/master/templates/grayscale ）。 我嘗試在頂部添加搜索欄，並且希望搜索欄與圖標對齊，並在其下方鏈接：174.37.193.115/chrome/

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
      <i class="fa fa-bars"></i>
      </button>
      <a class="navbar-brand" href="#page-top">
      <i class="fa fa-bolt fa-lg"></i>
      </a>
      <div class="input-group col-lg-6 col-lg-offset-0">
        <input type="text" class="form-control" placeholder="Look for people, groups, and anything">
        <span class="input-group-addon"><i class="fa fa-search"></i></span>
      </div>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-main-collapse">
      <ul class="nav navbar-nav">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a href="#page-top"></a>
        </li>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Profile</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something</a>
          <ul class="dropdown-menu">
            <li><a href="#">One</a>
            </li>
            <li><a href="#">Two</a>
            </li>
            <li><a href="#">Three</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Bamn</a>
        </li>
        <li>
          <a href="#">Pewpew</a>
        </li>
        <li>
          <a href="#">Vroom</a>
        </li>
        <li>
          <a href="#">Wheeeew</a>
        </li>
        <li>
          <a href="#">Bzzzt</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

不幸的是，我似乎無法使搜索欄進入正確的位置，而且似乎確實有些時髦。 通常，對於哪些元素可以相互堆疊（我似乎無法通過col強制），我也感到困惑。

在使搜索欄與螺栓以及下面的鏈接保持一致方面的任何幫助將不勝感激！ 元素如何按行堆疊的解釋將是額外的好處！

Answer 1

要獲得上述內容下的導航鏈接：

.nav>li>a {
    padding: 10px 30px 10px 0;
}

為了使懸停狀態看起來更好，也許這更好：

.nav>li>a {
    padding: 10px 0;
    margin-right: 30px;
}

或者，如果您只想補償填充偏移量，則可以將整個導航欄向左移動：

.navbar-nav {
    margin-left: -15px;
}

---

要使搜索欄與徽標內聯：

.col-lg-6 {
    margin-top: 12px;
}

只需將這些規則添加到您自己的css文件中，即可在引導規則之后調用。 對於其他響應式變體，您也可以使用類似的東西（或切換為百分比）。