为什么我在单独的行中获取搜索栏?
Why do I get the search bar in a separate line?
我正在尝试在 navbar
中添加一个 Google 搜索栏,但我不知道为什么它会换行,如下所示:
这是 html,应该使 navbar
及其组件都在同一列中。
<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>
我在 different/new 行中出现搜索栏的原因可能是什么?
您需要浮动搜索栏容器以使其与导航栏菜单项对齐。为此,您只需将 pull-left
(或 pull-right
)class 添加到搜索栏 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/
.googlesearch {
position: absolute;
top:0;
right:0;
width: 500px;
}
position: absolute;
是安排这些以编程方式创建的对象的关键。
我正在尝试在 navbar
中添加一个 Google 搜索栏,但我不知道为什么它会换行,如下所示:
这是 html,应该使 navbar
及其组件都在同一列中。
<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>
我在 different/new 行中出现搜索栏的原因可能是什么?
您需要浮动搜索栏容器以使其与导航栏菜单项对齐。为此,您只需将 pull-left
(或 pull-right
)class 添加到搜索栏 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/
.googlesearch {
position: absolute;
top:0;
right:0;
width: 500px;
}
position: absolute;
是安排这些以编程方式创建的对象的关键。