Bootstrap滚动导航栏无法正常工作

Question

我试图使它正常工作，但它不能在传送带区域上工作。它似乎正在检测我和工业（传送带）部分是一样的。我试图分开两个，但仍然认为，旋转木马区域是在约div区，这不是..谢谢！此外，我将导航测试链接设置为传送带进行测试。

<!------------- 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>

Answer 1

要明白发生了什么的占位符，我已经取代图像。

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

要解决该问题，请从<div class="about-all container col-md-12">中删除col-md-12。这里不需要这个类，但是将一个属性float: left;添加到位于传送带前面的块。它导致链接导致旋转木马尚未出现的地方。

---

其他建议

不要使用部分就像一个书签。将代码片段包装成部分。代码将更清晰，更能抵抗错误。

看起来有必要用<div class="eb-about col-md-offset-3 col-md-6 col-xs-12">代替<div class="eb-about col-md-offset-3 col-md-6 col-xs-6">。使用<br />或<br>代替</ br>。甚至更好 - 将大段落分成更小的段落。

幻灯片有很长的描述。将它们隐藏在小屏幕上会更好。我向他们添加了hidden-xs。

此代码有助于头不菜单下的下降而滚动：

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

---

检查结果

@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; 
 
}

<!------------- 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>