Bootstrap Scrolling Nav Bar无法正常工作

Question

我正在尝试使其正常运行，但它不适用于旋转木马区域。它似乎检测到我的约和行业（轮播）部分是相同的。我试图将两者分开，但仍然认为旋转木马区域位于关于div部分，这不是..谢谢!!我还将导航测试链接设置为轮播以进行测试。

＆＃13;

＆＃13;

<!------------- navigation -------------->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#home">Home</a>
        </li>
        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
        <li>
          <a class="page-scroll" href="#myCarousel">test</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact1">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

<!---------- video ---------->

<div id="home"></div>

<video loop autoplay poster="links/._Aloha-Mundo.jpg" id="bgvid">
  <source src="links/eb%20vid.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
  <source src="links/eb_vid.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class="logo">
  <img src="links/eb-logo-01.png" />
</div>

<!---------- about -------->
<div id="about">
  <div class="about-all container col-md-12">
    <div class="row">
      <div class=""></div>
      <div class="eb-about col-md-offset-3 col-md-6 col-xs-6">
        <h1>About Eon-Blue</h1>
        <p>Based in Las Vegas, Nevada, Eon Blue is your complete branding technology solution. By putting a robust scope of capabilities together, we make sure each component is working with the other – all towards achieving your objectives. With web, information
          technology, marketing, software engineering and graphic design all moving in lockstep, our clients avoid the pitfalls of fragmentation...and enjoy the benefits of seamless integration.</p>
      </div>
    </div>

    <div class="row">
      <div class="tech col-md-4">
        <img src="links/icons-01.png" alt="technology and consulting" class="compass">
        <h2>Technology &amp; Consulting</h2>
        <p>We’ve put together a team of professionals who are not only adept at what they do, but also great at working with clients, personally, to get the job done. We’re here to advise our clients. To educate them on new technologies and capabilities.
          And most of all, to hear their goals and objectives.</ br>
          We can create the innovative solutions that achieve them. We do our due-diligence before starting any project to make sure that all of the missing puzzles are put together before any development begins to take place on the canvas.</ br>
          Creating sustainable software is important to us and we make sure we get it right the first time.</p>
      </div>
      <div class="software col-md-4">
        <img src="links/icons-02.png" alt="software development">
        <h2>Software Development</h2>
        <p>No matter what your objectives, our experienced development team can create the software that helps you accomplish them. Eon Blue will tailor a solution specific to you, built from the ground up. Our approach is:</p>
        <ul class="sd-list">
          <li>Strategy-driven</li>
          <li>Free from open-source software</li>
          <li>We work closely with our analysts &amp; designers</li>
          <li>Grounded in best practices</li>
          <li>Maintaining the systems once they are up and running</li>
          <li>Testing the product in controlled, real situations before going live</li>
          <li>Reviewing current systems</li>
        </ul>
      </div>
      <div class="data-services col-md-4">
        <img src="links/icons-03.png" alt="data">
        <h2>Data Services</h2>
        <p>Data is what moves the world. Yet many companies find the volume of data to be unwieldy, or sometimes downright unmanageable. We help you make sense of data so you can turn it into profits. Our full capabilities include:</p>
        <ul>
          <li>Warehousing</li>
          <li>Scrubbing</li>
          <li>Validations</li>
          <li>Reports</li>
          <li>Conversions</li>
          <li>SRS reporting</li>
          <li>Management</li>
          <li>Mining</li>
          <li>Crystal reports...and more</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!--------- carousel --------->
<section id="industries"></section>
<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" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    <li data-target="#myCarousel" data-slide-to="3" class=""></li>
    <li data-target="#myCarousel" data-slide-to="4" class=""></li>
    <li data-target="#myCarousel" data-slide-to="5" class=""></li>
    <li data-target="#myCarousel" data-slide-to="6" class=""></li>
    <li data-target="#myCarousel" data-slide-to="7" class=""></li>
  </ol>

  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="links/self-insured-groups.png" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Self Insured Groups</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="links/captive-insurance.png" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Captive Insurance</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="third-slide" src="links/workers-comp.png" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Workers Compensation Insurance</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="fourth-slide" src="links/alternative-risk.png" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Alternative Risk</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="fifth-slide" src="links/property-and-casualty.png" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Property and Casualty</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="sixth-slide" src="links/reinsurance-and-excessInsurance.png" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Reinsurance and Excess Insurance</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="seventh-slide" src="links/Self-Funded-Health.png" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Self Funded Health</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="eight-slide" src="links/risk-management.png" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Risk Management</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>

  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要了解发生了什么，我已经替换了占位符上的图像。

问题是相对链接不会将页面滚动到轮播。

要解决此问题，请从col-md-12移除<div class="about-all container col-md-12">。此处不需要此类，但会向块添加属性float: left;，该块位于轮播前面。它导致链接导致旋转木马尚未出现的地方。

其他建议

请勿像书签那样使用该部分。将代码片段分成几部分。代码将更清晰，更容易出错。

似乎有必要将<div class="eb-about col-md-offset-3 col-md-6 col-xs-6">替换为<div class="eb-about col-md-offset-3 col-md-6 col-xs-12">。

使用<br />或<br>代替</ br>。甚至更好 - 将一个大段分成更小的段落。

幻灯片有很长的描述。最好将它们隐藏在小屏幕上。我已将hidden-xs添加到他们身上。

此代码有助于标题在滚动时不属于菜单：

#home, #about, #industries, #contact1 {
  margin-bottom: -70px;
  padding-top: 70px;
}

检查结果

＆＃13;

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

#home, #about, #industries, #contact1 {
  margin-bottom: -70px;
  padding-top: 70px;
}
#contact1 {
  margin-bottom: 20px;
}

img {
  height: auto;
  max-width: 100%;
  width: 100%;
}
.logo {
  margin: 20px auto;
  width: 100px;
}

＆＃13;

<!------------- navigation -------------->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#home">Home</a>
        </li>
        <li>
          <a class="page-scroll" href="#about">About</a>
        </li>
        <li>
          <a class="page-scroll" href="#industries">Carousel</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact1">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

<!---------- video ---------->
<section id="home">
  <div class="container">
    <img src="http://placehold.it/800x200&text=Video" alt="">

    <div class="logo">
      <img src="http://placehold.it/100x100&text=Logo" alt="">
    </div>
  </div>
</section

<!---------- about -------->
<section id="about">
  <div class="about-all container">
    <div class="row">
      <div class=""></div>
      <div class="eb-about col-md-offset-3 col-md-6 col-xs-12">
        <h1>About Eon-Blue</h1>
        <p>Based in Las Vegas, Nevada, Eon Blue is your complete branding technology solution. By putting a robust scope of capabilities together, we make sure each component is working with the other – all towards achieving your objectives. With web, information
          technology, marketing, software engineering and graphic design all moving in lockstep, our clients avoid the pitfalls of fragmentation...and enjoy the benefits of seamless integration.</p>
      </div>
    </div>

    <div class="row">
      <div class="tech col-md-4">
        <img src="http://placehold.it/400x100&text=Icon%201" alt="">
        <h2>Technology &amp; Consulting</h2>
        <p>We’ve put together a team of professionals who are not only adept at what they do, but also great at working with clients, personally, to get the job done. We’re here to advise our clients. To educate them on new technologies and capabilities. And most of all, to hear their goals and objectives.</p>
        <p>We can create the innovative solutions that achieve them. We do our due-diligence before starting any project to make sure that all of the missing puzzles are put together before any development begins to take place on the canvas.</p>
        <p>Creating sustainable software is important to us and we make sure we get it right the first time.</p>
      </div>
      
      <div class="software col-md-4">
        <img src="http://placehold.it/400x100&text=Icon%202" alt="">
        <h2>Software Development</h2>
        <p>No matter what your objectives, our experienced development team can create the software that helps you accomplish them. Eon Blue will tailor a solution specific to you, built from the ground up. Our approach is:</p>
        <ul class="sd-list">
          <li>Strategy-driven</li>
          <li>Free from open-source software</li>
          <li>We work closely with our analysts &amp; designers</li>
          <li>Grounded in best practices</li>
          <li>Maintaining the systems once they are up and running</li>
          <li>Testing the product in controlled, real situations before going live</li>
          <li>Reviewing current systems</li>
        </ul>
      </div>
      
      <div class="data-services col-md-4">
        <img src="http://placehold.it/400x100&text=Icon%203" alt="">
        <h2>Data Services</h2>
        <p>Data is what moves the world. Yet many companies find the volume of data to be unwieldy, or sometimes downright unmanageable. We help you make sense of data so you can turn it into profits. Our full capabilities include:</p>
        <ul>
          <li>Warehousing</li>
          <li>Scrubbing</li>
          <li>Validations</li>
          <li>Reports</li>
          <li>Conversions</li>
          <li>SRS reporting</li>
          <li>Management</li>
          <li>Mining</li>
          <li>Crystal reports...and more</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!--------- carousel --------->
<section id="industries">
  <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" class=""></li>
      <li data-target="#myCarousel" data-slide-to="2" class=""></li>
      <li data-target="#myCarousel" data-slide-to="3" class=""></li>
      <li data-target="#myCarousel" data-slide-to="4" class=""></li>
      <li data-target="#myCarousel" data-slide-to="5" class=""></li>
      <li data-target="#myCarousel" data-slide-to="6" class=""></li>
      <li data-target="#myCarousel" data-slide-to="7" class=""></li>
    </ol>

    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://placehold.it/800x200&text=Slide%201" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Self Insured Groups</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/800x200&text=Slide%202" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Captive Insurance</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/800x200&text=Slide%203" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Workers Compensation Insurance</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/800x200&text=Slide%204" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Alternative Risk</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/800x200&text=Slide%205" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Property and Casualty</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/800x200&text=Slide%206" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Reinsurance and Excess Insurance</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/800x200&text=Slide%207" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Self Funded Health</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://placehold.it/800x200&text=Slide%208" alt="">
        <div class="container">
          <div class="carousel-caption">
            <h1>Risk Management</h1>
            <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="contact1">
  <div class="container">
    <h1>Contact</h1>
    <p>Phone</p>
    <p>E-mail</p>
    <p>Address</p>
    <img src="http://placehold.it/800x200&text=Map" alt="">
  </div>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;