我对 html、css、bootstrapping 和一般的 Web 开发还很陌生。我现在正在一个网站上工作，我正在使用 Bootstrap 。在标题中，我想在我的导航栏正下方添加谷歌的搜索栏，但无论我做什么，它看起来都是错误的。到目前为止，我已经到了 this ，但我无法使它的长度或任何东西匹配。请帮忙，到目前为止，这是我的标题 html 代码。
<header class="container">
<div class="row">
<h1 class="col-sm-4" style="display: inline"><img src="../../Pictures/cips-logo-default.png"</img></h1>
<nav class="col-sm-8">
<div class="row col-sm-10">
<img src="homebutton.png"/>
<img src="aboutusbutton.png"/>
<img src="coursesbutton.png"/>
<img src="contactbutton.png"/>
<img src="faqbutton.png"/>
</div>
<div class="row">
<script>
(function() {
var cx = '003882963998724515671:mwpl-rnunhm';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</nav>
</div>
</header>
这是CSS
@charset "utf-8";
/* CSS Document */
body{
font-family: "Lato";
font-weight: 300;
background: ##ccd844;
background-image: url("zenbg-1.png"), url("zenbg-2.png");
background-repeat: repeat-x, repeat;
}
header {
padding: 20px 0;
}
header .row,
footer .row {
display: flex;
align-items: center;
}
header h1 {
font-weight: 700;
margin: 0;
}
header nav {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
font-size: 18px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
transition: all 0.3s ease 0s;
margin-top: 60px;
}
header form {
display: flex;
justify-content: flex-end;
margin-left: 70px;
}
header nav img:hover {
margin-top: 2px;
}
header p {
padding: 0 20px;
margin: 0;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Knowledge Enterprise</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4" style="display: inline"><img src="http://i.imgur.com/FsPDZRt.png"</img></h1>
<nav class="col-sm-8">
<div class="row col-sm-10">
<img src="http://i.imgur.com/hbiK5vO.png"/>
<img src="http://i.imgur.com/jjXEktQ.png"/>
<img src="http://i.imgur.com/XOXEfiJ.png"/>
<img src="http://i.imgur.com/YHtenII.png"/>
<img src="http://i.imgur.com/Eld0eGQ.png"/>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-4">
<script>
(function() {
var cx = '003882963998724515671:mwpl-rnunhm';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</div>
</nav>
</div>
</header>最佳答案
我不完全知道您的脚本是如何工作的，但尝试将脚本包装在另一个具有适当类名的 div 中，以便以相同的方式对齐内容。
<div class="row">
<h1 class="col-sm-4" style="display: inline"><img src="http://i.imgur.com/FsPDZRt.png"</img></h1>
<nav class="col-sm-8">
<div class="row col-sm-10">
<img src="http://i.imgur.com/hbiK5vO.png" />
<img src="http://i.imgur.com/jjXEktQ.png" />
<img src="http://i.imgur.com/XOXEfiJ.png" />
<img src="http://i.imgur.com/YHtenII.png" />
<img src="http://i.imgur.com/Eld0eGQ.png" />
</div>
</nav>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-4">
<script>
(function () {
var cx = '003882963998724515671:mwpl-rnunhm';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
</div>
关于html - 试图在导航栏下获取搜索栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38748504/