Question

我对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>

Answer 1

我并不完全知道您的脚本是如何工作的，但是尝试将脚本包装在具有正确类名的其他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>

试图在导航栏下获取搜索栏

1 个答案: