谷歌地图在引导标签中 - 特定代码

时间：2016-01-12 05:57:51

标签： twitter-bootstrap tabs

使用引导标签时，地图无法正确加载。解决方案是在单击特定选项卡时调整地图大小。我一直在愚弄这个太久了。我已经使用了我在堆栈上找到的其他解决方案，但我不知道为什么它仍然无法正常工作。

这是我的所有代码。我为这个邋..道歉。当我完成项目时，我通常会回过头来做好准备。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|Oswald|Titillium Web|Roboto  ">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var myLatLng = {lat: 64.8370761, lng: -147.697845};
        var mapOptions = {
          center: myLatLng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: "Nelson's Photography"
        });
      }

        $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
            initialize();
        });

    </script>
  </head>



  <body>
    <nav class="navbardos navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"><img src="/images/titlegraphic.jpg" class="logo"></a>
        </div>
          <ul class="nav navbar-navdos">
            <li><a class="number">(907)452-3116</a></li>
            <li><a>606 Bentley Drive | Fairbanks, AK</a></li>
          </ul>
      </div>
    </nav>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav nav-pills">
            <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
            <li><a data-toggle="pill" href="#about">About</a></li>
            <li><a data-toggle="pill" href="#services">Services</a></li>
            <li><a data-toggle="pill" href="#portfolio">Portfolio</a></li>
            <li><a data-toggle="pill" href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="tab-content">

      <div id="home" class="tab-pane fade in active">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="/images/10x10reflect-lg.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Music Production Studio</h1>
              <p></p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="/images/11830247_10207115344978900_1142161344_n.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Beat Gallery</h1>
              <p></p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Listen</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="/images/TMPstudio.jpg" alt="Third slide" style="width: 600px;">
          <div class="container">
            <div class="carousel-caption">
              <h1>Studio Services</h1>
              <p></p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
      </div>

      <div id="about" class="tab-pane fade">
        <img src="images/entry.jpg" id="AboutPic1">
        <h1></h1>
        <p id="lead">
            Use this document as a way to quickly start any new project.<br> 
            All you get is this text and a mostly barebones HTML document.
        </p>
      </div>

      <div id="services" class="tab-pane fade">
        <h1>FUCK me</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

      <div id="portfolio" class="tab-pane fade">
        <h1>FUCK me</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

      <div id="contact" class="tab-pane fade">
        <div id="map"></div>
        <div id="contact-content">
        <h1>We're looking forward to<br> 
            hearing from you!</h1><br>
        <h2 style="text-decoration: underline">Phone Number:</h2>
        <h2>907-452-3116</h2><br>
        <h2 style="text-decoration: underline">Email:</h2>
        <h2>email</h2><br>
        <h2 style="text-decoration: underline">Address:</h2>
        <h2>
            Nelson's Professional Photography<br>
            address<br>
            Fairbanks, Alaska 99701<br>
        </h2>
        </div>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

CSS：

body {
  padding-top: 50px;
  background-color: #777
}

h1, h2, h3 {
    margin-top: 0;
    margin-bottom: 0;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;


}

.navbar.navbar-inverse.navbar-fixed-top {
    position: absolute;
    background-color: #336699;
    border: 0px;
    height: 51px;
    margin-top: 120px;
}

/*.nav.nav-pills{


}*/
.nav.nav-pills li a{
    color: white;
    font-family: Roboto, Titillium Web, Arial, Verdana, sans-serif; 
    padding-left: 76px;
    padding-right: 76px;
    font-size: 22px;
    margin-top: 0px;

}
.nav-pills li a:hover{
      color: grey;

}



.navbardos.navbar-inverse.navbar-fixed-top { 
    position: absolute;
    background-color: black;
    border: 0px;
    height: 120px;
}

.nav.navbar-navdos{
    float: right;
    font-size: 13px;
    margin-top: 30px;
    margin-right: 24px;
    width: 200px;
}

.nav.navbar-navdos li a{

    padding:0px;
    color: white;

}

.nav.navbar-navdos li a:hover{
    background-color: black;
}

.number {
    font-size: 30px;

}
.logo {
    width: 400px;
    margin-left: -130px;
}

#home{
    margin-top: 100px;
    position: absolute;

}

#about{
    margin-top: 150px;
    width:100%
}

#services{
    margin-top: 150px;
    position: absolute;
}

#portfolio{
    margin-top: 150px;
    position: absolute;
}

#contact{
    font-family: Titillium Web, Arial, Verdana, sans-serif;
    color:  #E8E8E8;
}

#contact-content{
    position: absolute;
    float: left;
    margin-top: 176px;
    margin-left: 100px;
}

#map {
    margin-left: 650px;
    margin-top: 180px;
    position: absolute;
    float: right;  
    width: 550px;
    height: 400px;
}

/* Carousel base class */
.carousel {
  margin-left: 30px;
  height: 500px;
  width: 100%;
  margin-bottom: 60px;
  margin-top: 20px;

}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  height: 500px;
}

.btn.btn-lg.btn-primary {
  background-color: #FF9900 ; 
}

.btn.btn-lg.btn-primary:hover {
  background-color: #B22400    ; 
}
/* Declare heights because of positioning of img element */
.carousel .item {
  height: 800px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 800px;
}

.carousel-control.right, .carousel-control.left {
  background-image:none;
  margin-top: 200px;
}

1 个答案:

答案 0 :(得分：1)

更新：您需要将data-toggle="pill"更改为data-toggle="tab"，请参阅更新的示例代码段（2和3）。

您可以尝试使用：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  initialize();
});

初始化。

请参阅工作示例摘录。

＆＃13;
＆＃13; 
function initialize() {
  var mapCanvas = document.getElementById('map');
  var myLatLng = {
    lat: 64.8370761,
    lng: -147.697845
  };
  var mapOptions = {
    center: myLatLng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "Nelson's Photography"
  });
}

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  initialize();
});
＆＃13; 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  max-width: 550px;
  height: 400px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="navbar">
    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="tab" href="#home">Home</a>
      </li>
      <li><a data-toggle="tab" href="#about">About</a>
      </li>
      <li><a data-toggle="tab" href="#services">Services</a>
      </li>
      <li><a data-toggle="tab" href="#portfolio">Portfolio</a>
      </li>
      <li><a data-toggle="tab" href="#contact">Contact</a>
      </li>
    </ul>
  </div>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <div class="alert alert-info">
        Home
      </div>
    </div>
    <div id="about" class="tab-pane fade">
      <div class="alert alert-info">
        About
      </div>
    </div>
    <div id="services" class="tab-pane fade">
      <div class="alert alert-info">
        Services
      </div>
    </div>
    <div id="portfolio" class="tab-pane fade">
      <div class="alert alert-info">
        Portfolio
      </div>
    </div>
    <div id="contact" class="tab-pane fade">
      <div class="alert alert-info">
        Map
      </div>
      <div id="map"></div>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

更新的代码：示例2

＆＃13;
＆＃13; 
 function initialize() {
   var mapCanvas = document.getElementById('map');
   var myLatLng = {
     lat: 64.8370761,
     lng: -147.697845
   };
   var mapOptions = {
     center: myLatLng,
     zoom: 16,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map = new google.maps.Map(mapCanvas, mapOptions)
   var marker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     title: "Nelson's Photography"
   });
 }

 $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
   initialize();
 });
＆＃13; 
body {
  padding-top: 50px;
  background-color: #777
}
h1,
h2,
h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}
.navbar.navbar-inverse.navbar-fixed-top {
  position: absolute;
  background-color: #336699;
  border: 0px;
  height: 51px;
  margin-top: 120px;
}
/*.nav.nav-pills{


}*/

.nav.nav-pills li a {
  color: white;
  font-family: Roboto, Titillium Web, Arial, Verdana, sans-serif;
  padding-left: 76px;
  padding-right: 76px;
  font-size: 22px;
  margin-top: 0px;
}
.nav-pills li a:hover {
  color: grey;
}
.navbardos.navbar-inverse.navbar-fixed-top {
  position: absolute;
  background-color: black;
  border: 0px;
  height: 120px;
}
.nav.navbar-navdos {
  float: right;
  font-size: 13px;
  margin-top: 30px;
  margin-right: 24px;
  width: 200px;
}
.nav.navbar-navdos li a {
  padding: 0px;
  color: white;
}
.nav.navbar-navdos li a:hover {
  background-color: black;
}
.number {
  font-size: 30px;
}
.logo {
  width: 400px;
  margin-left: -130px;
}
#home {
  margin-top: 100px;
  position: absolute;
}
#about {
  margin-top: 150px;
  width: 100%
}
#services {
  margin-top: 150px;
  position: absolute;
}
#portfolio {
  margin-top: 150px;
  position: absolute;
}
#contact {
  font-family: Titillium Web, Arial, Verdana, sans-serif;
  color: #E8E8E8;
}
#contact-content {
  position: absolute;
  float: left;
  margin-top: 176px;
  margin-left: 100px;
}
#map {
  margin-left: 650px;
  margin-top: 180px;
  position: absolute;
  float: right;
  width: 550px;
  height: 400px;
}
/* Carousel base class */

.carousel {
  margin-left: 30px;
  height: 500px;
  width: 100%;
  margin-bottom: 60px;
  margin-top: 20px;
}
/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  height: 500px;
}
.btn.btn-lg.btn-primary {
  background-color: #FF9900;
}
.btn.btn-lg.btn-primary:hover {
  background-color: #B22400;
}
/* Declare heights because of positioning of img element */

.carousel .item {
  height: 800px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 800px;
}
.carousel-control.right,
.carousel-control.left {
  background-image: none;
  margin-top: 200px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbardos navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="/images/titlegraphic.jpg" class="logo">
      </a>
    </div>
    <ul class="nav navbar-navdos">
      <li><a class="number">(907)452-3116</a>
      </li>
      <li><a>606 Bentley Drive | Fairbanks, AK</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav nav-pills">
        <li class="active"><a data-toggle="tab" href="#home">Home</a>
        </li>
        <li><a data-toggle="tab" href="#about">About</a>
        </li>
        <li><a data-toggle="tab" href="#services">Services</a>
        </li>
        <li><a data-toggle="tab" href="#portfolio">Portfolio</a>
        </li>
        <li><a data-toggle="tab" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

<div class="tab-content">

  <div id="home" class="tab-pane fade in active">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="/images/10x10reflect-lg.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Music Production Studio</h1>
              <p></p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a>
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="/images/11830247_10207115344978900_1142161344_n.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Beat Gallery</h1>
              <p></p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Listen</a>
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="/images/TMPstudio.jpg" alt="Third slide" style="width: 600px;">
          <div class="container">
            <div class="carousel-caption">
              <h1>Studio Services</h1>
              <p></p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- /.carousel -->
  </div>

  <div id="about" class="tab-pane fade">
    <img src="images/entry.jpg" id="AboutPic1">
    <h1></h1>
    <p id="lead">
      Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.
    </p>
  </div>

  <div id="services" class="tab-pane fade">
    <h1>FUCK me</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.</p>
  </div>

  <div id="portfolio" class="tab-pane fade">
    <h1>FUCK me</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.</p>
  </div>

  <div id="contact" class="tab-pane fade">
    <div id="map"></div>
    <div id="contact-content">
      <h1>We're looking forward to<br> 
            hearing from you!</h1>
      <br>
      <h2 style="text-decoration: underline">Phone Number:</h2>
      <h2>907-452-3116</h2>
      <br>
      <h2 style="text-decoration: underline">Email:</h2>
      <h2>email</h2>
      <br>
      <h2 style="text-decoration: underline">Address:</h2>
      <h2>
            Nelson's Professional Photography<br>
            address<br>
            Fairbanks, Alaska 99701<br>
        </h2>
    </div>
  </div>

</div>
<!-- /.container -->
＆＃13;
＆＃13;
＆＃13;

示例3

＆＃13;
＆＃13; 
function initialize() {
  var mapCanvas = document.getElementById('map');
  var myLatLng = {
    lat: 64.8370761,
    lng: -147.697845
  };
  var mapOptions = {
    center: myLatLng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "Nelson's Photography"
  });
}

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  initialize();
});
＆＃13; 
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 500px;
  width: 100%;
}
.navbar.navbar-top,
.navbar.navbar-bottom {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .navbar.navbar-bottom .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-bottom .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-bottom .navbar-nav > li > a {
    text-align: center;
  }
  .navbar .navbar-brand {
    padding-top: 0;
  }
  .navbar .navbar-brand img {
    height: 100px;
    width: 200px;
    margin: -24px;
  }
  .navbar-top {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .navbar-top,
  .navbar-bottom {
    border: none;
  }
}
.carousel,
.item,
.active,
.carousel-inner {
  height: 100%;
}
/* Carousel base class */

.carousel {
  height: 500px;
  width: 100%;
}
/* Since positioning the image, we need to help out the caption */

.carousel .carousel-caption {
  height: 500px;
}
.carousel .btn.btn-lg.btn-primary {
  background-color: #FF9900;
}
.carousel .btn.btn-lg.btn-primary:hover {
  background-color: #B22400;
}
/* Declare heights because of positioning of img element */

.carousel .carousel-inner > .item > img {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}
.carousel .carousel-caption {
  position: absolute;
  top: 33.33%;
}
.carousel .carousel-control.right,
.carousel .carousel-control.left {
  background-image: none;
}
.contact-content {
  position: absolute;
  top: 160px;
  left: 0;
  padding: 65px 15px 15px;
  color: white;
  background: rgba(0, 0, 0, 0.25);
  height: 500px;
}
.contact-content h2 {
  margin: 0;
  font-size: 22px;
  line-height: 35px;
}
.contact-content h2:nth-child(even) {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .carousel {
    height: 300px;
  }
  .carousel-caption {
    top: 10%;
  }
  #map {
    height: 300px;
  }
  .contact-content {
    top: 145px;
    left: 0;
    padding: 30px 15px 15px;
    background: rgba(0, 0, 0, 0.55);
    width: 100%;
    height: 300px;
  }
  .contact-content h1 {
    margin: 0;
    font-size: 18px;
  }
  .contact-content h2 {
    font-size: 16px;
    line-height: 30px;
  }
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<nav class="navbar navbar-inverse navbar-static-top navbar-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand hidden-xs" href="#">
        <img src="http://placehold.it/200x100/f00">
      </a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">+! (907)-452-3116</a>
      </li>
      <li><a href="#">606 Bentley Drive | Fairbanks, AK</a>
      </li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-static-top navbar-bottom">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand visible-xs" href="#">BRAND</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a data-toggle="tab" href="#home">Home</a>
        </li>
        <li><a data-toggle="tab" href="#about">About</a>
        </li>
        <li><a data-toggle="tab" href="#services">Services</a>
        </li>
        <li><a data-toggle="tab" href="#portfolio">Portfolio</a>
        </li>
        <li><a data-toggle="tab" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

<div class="tab-content">

  <div id="home" class="tab-pane fade in active">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="http://placehold.it/2500x1000/ff0" alt="First slide">
          <div class="carousel-caption">
            <h1>Music Production Studio</h1>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a>
            </p>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="http://placehold.it/2500x1000/000" alt="Second slide">
          <div class="carousel-caption">
            <h1>Beat Gallery</h1>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Listen</a>
            </p>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="http://placehold.it/2500x1000/444" alt="Third slide">
          <div class="carousel-caption">
            <h1>Studio Services</h1>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a>
            </p>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- /.carousel -->
  </div>

  <div id="about" class="tab-pane fade">
    <img src="http://placehold.it/400x400/f00" id="AboutPic1">
    <p id="lead">
      Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.
    </p>
  </div>

  <div id="services" class="tab-pane fade">
    <h1>FUCK me</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.</p>
  </div>

  <div id="portfolio" class="tab-pane fade">
    <h1>FUCK me</h1>
    <p class="lead">Use this document as a way to quickly start any new project.
      <br>All you get is this text and a mostly barebones HTML document.</p>
  </div>

  <div id="contact" class="tab-pane fade">
    <div id="map"></div>
    <div class="contact-content">
      <h1>We're looking forward to<br> 
                    hearing from you!</h1>
      <h2>Phone Number:</h2>
      <h2>907-452-3116</h2>
      <h2>Email:</h2>
      <h2>email</h2>
      <h2>Address:</h2>
      <h2>Nelson's Professional Photography<br>
                    Fairbanks, Alaska 99701<br>
                </h2>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题