Question

我刚刚将Google自定义搜索整合到我的Bootstrap驱动的NavBar中。我发现了一些奇怪的格式，我通过添加下面的CSS代码来修复。

这解决了许多问题，但仍有一个问题：搜索框强制在我的导航栏中跳过一行。 Screenshot of line-skip

下面是我的HTML和CSS代码。

HTML代码（基本上是用Google代替他们的搜索表单的自举模板）：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>



      <!-- Google search -->
      <!-- <gcse:search></gcse:search> -->
      <div style="width: 20%;">
       <gcse:search></gcse:search>
      </div>

      <!-- Bootstrap search -->
      <!-- <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter Android Term">
        </div>
        <button type="submit" class="btn btn-default">Search</button>
      </form> -->



      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS代码

/* AM22 - To make google search box appear correct */
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button 
{
    box-sizing: content-box;
    line-height: normal;
}

/* AM22 - To make google search results tabs appear correct */
.gsc-tabsArea div 
{
    /*By default, Google custom search CSS sets it as AUTO, which shows scroll bars*/
    overflow: visible; 
}

.nowrap {
    white-space: nowrap;
}

我尝试了nowrap属性的一些变体，nobr标签和white-space：nowrap;但这些都没有奏效。有什么建议吗？

Answer 1

对于我的网站（上面评论中的链接），我将搜索框放在<div class="navbar-header">

中

我相信我还必须手动设置宽度，使其不是整页宽度。

现在关于造型我的版本......

Google自定义搜索与Bootstrap冲突并在NavBar中跳过一行

1 个答案: