html - 为什么我在单独的一行中找到搜索栏？

我正在尝试在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>

我在其他/新行中找到搜索栏的原因可能是什么？

最佳答案

您需要浮动搜索栏容器才能使其与导航栏菜单项对齐。为此，您只需将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/

关于html - 为什么我在单独的一行中找到搜索栏？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28260830/