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>