html - 为什么我在单独的行中获取搜索栏？

Question

我正在尝试在 navbar 中添加 Google 搜索栏，但我不明白为什么它会换行，如下所示:

这是应该将 navbar 及其组件都放在同一列中的 html。

<div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>            
        <nav class="navbar navbar-default navbar-inverse">
            <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>
              </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="#">Home <span class="sr-only">(current)</span></a></li>
                  <li><a href="./our-activities.html">Activities</a></li>
                  <li><a href="./our-vision.html">Vision</a></li>
                  <li><a href="./ngo-structure.html">Structure</a></li>
                  <li><a href="./by-laws.html">By-Laws</a></li>
                </ul>
               <!-- search bar -->
                <div>
                    <script>
                    (function() {
                      var cx = '001581938009576517320:-1og4oqxb-y';
                      var gcse = document.createElement('script');
                      gcse.type = 'text/javascript';
                      gcse.async = true;
                      gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                          '//www.google.com/cse/cse.js?cx=' + cx;
                      var s = document.getElementsByTagName('script')[0];
                      s.parentNode.insertBefore(gcse, s);
                    })();
                  </script>
                  <gcse:search></gcse:search>
                </div>

              </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
          </nav>
      </div>

我在不同/新行中获取搜索栏的原因可能是什么？

Answer 1

您需要 float 搜索栏容器以使其与导航栏菜单项对齐。为此，您只需将 pull-left(或 pull-right)类添加到搜索栏 div。您还需要设置一些固定宽度，如 col-sm-6 为 50% 宽度，否则默认为 100%。

<div class="pull-left col-sm-6">
    <script>
        (function() {
            var cx = '001581938009576517320:-1og4oqxb-y';
            var gcse = document.createElement('script');
            gcse.type = 'text/javascript';
            gcse.async = true;
            gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                '//www.google.com/cse/cse.js?cx=' + cx;
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(gcse, s);
        })();
    </script>
    <gcse:search></gcse:search>
</div>

之后，您可以通过覆盖默认样式来进一步自定义搜索栏样式，例如:

.navbar .cse .gsc-control-cse, 
.navbar .gsc-control-cse {
    padding: 9px 0 0;
    background: inherit;
    border: 0;
}

演示:http://run.plnkr.co/FMCuEPGojpv3n8OM/