标题引导程序中的搜索对齐问题答案

【问题标题】：Issue with alignment of search in header bootstrap标题引导程序中的搜索对齐问题
【发布时间】：2017-09-18 07:05:31
【问题描述】：

我正在使用下面的代码在标题中包含搜索，但无法根据长度正确对齐

我希望搜索对齐如下

所以，如果我在标题中添加一个新菜单，那么它应该会自动调整可用空间。

现在，它如下所示

代码链接：https://plnkr.co/edit/GH6Pogkd8LBbETfZRFtm?p=preview 测试

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#he-nav-bar">
        <span class="sr-only">${Toggle navigation}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>


    <div sp-navbar-toggle="" class="collapse navbar-collapse navbar-right" id="he-nav-bar">
  /**added search here**********/
<form method="get" action="?">
  <input type="hidden" name="id" value="search"/>
  <input type="hidden" name="t" value="{{data.searchType}}"/>
  <div class="input-group input-group-{{::c.options.size}}">
    <!-- uses ui.bootstrap.typeahead -->
    <input name="q" type="text" placeholder="{{::c.options.title}}" ng-model="c.selectedState"
           ng-model-options="{debounce: 250}" autocomplete="off"
           uib-typeahead="item as item.label for item in c.getResults($viewValue)"
           typeahead-focus-first="false"
           typeahead-on-select="c.onSelect($item, $model, $label)"
           typeahead-template-url="sp-typeahead.html" class="form-control input-typeahead">
    <span class="input-group-btn">
      <button name="search" type="submit" class="btn btn-{{::c.options.color}}">
        <i ng-if="::c.options.glyph" class="fa fa-{{::c.options.glyph}}"></i>
      </button>
    </span>
  </div>
</form>
      <ul ng-if="" class="nav navbar-nav">
        <li><a href ng-click="openLogin()">${Login}</a></li>
      </ul>
      <ul ng-if="" class="nav navbar-nav">        
        <li ng-if="><a href ng-click="openPopUp()">${Help}</a></li>
        <li class="dropdown hidden-xs">
             <ul class="dropdown-menu">
            <li><a ng-href="">${menu}</a></li>
            <li><a href="">${submenu}</a></li>
          </ul>
        </li>
        <li class="visible-xs-block"><a ng-href=""><span class="navbar-avatar"><sn-avatar class="avatar-small-medium" /></span>${name}</a></li>
        <li class="visible-xs-block"><a href="">${Logout}</a></li>
      </ul> 
    </div>

  </nav>  
</div>

谢谢克里希纳

【问题讨论】：

将属性display: inline-block 添加到您的搜索栏。那应该可以解决它。
link to how inline-block works
谢谢，我尝试为该 div 定义样式，但仍然表现相同
在您的代码中，您有 <input/> 用于在第二个 div navbar-collapse 内进行搜索。但似乎你想要它在第一个 div navbar-header 中。如果这不是你想要的，请纠正我。

标签： html css angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

I think below code will work for you,

https://plnkr.co/edit/wPW3AoWvLm37Lz29Pq2Z?p=preview

【讨论】：