在Bootstrap 4中的滑块导航中，如何将“活动”类添加到当前选项卡？

Question

我用一个正在工作的静态网站制作了一个JSFiddle（ https://jsfiddle.net/bhLy0d74/1/ ），该网站是Bootstrap 3（ https： //www.W3 School）公司主题的Bootstrap 4改编版。 w3schools.com/bootstrap/bootstrap_theme_company.asp ）。

我添加了以下脚本来添加平滑滚动：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    var hash = this.hash;

    $('html, body').animate({
        scrollTop: $(hash).offset().top - parseInt($(hash).css('padding-top'))
    }, 300, function() {
      if (history.pushState) {
        history.pushState(null, null, hash);
      } else {
        location.hash = hash;
      }
    });
});

这是带有适用于此链接的导航栏：

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark justify-content-between">
  <a class="navbar-brand" href="#">Peek Solutions</a>
  <div class="navbar-nav justify-content-end">
    <a class="nav-item nav-link" href="#about">About</a>
    <a class="nav-item nav-link" href="#services">Services</a>
    <a class="nav-item nav-link" href="#contact">Contact</a>
  </div>
</nav>

问题是，当我“正常”滚动浏览页面时，我希望各种导航栏链接通过获取"active"类而依次点亮。 这是一个例子：

我单击的最后一个导航链接是“关于”，因此将其突出显示。 但是，此后我一直向下滚动到“服务”，因此我希望“服务”导航突出显示，而不是“关于”。

看起来在Bootstrap 3中，类似的样式会自动发生，但是我看不到如何在Bootstrap 4中进行此操作？

Answer 1

您需要修改jQuery 。 您需要使用window.scroll来获得您想要的结果

 $(document).on('click', 'a[href^="#"]', function (event) { event.preventDefault(); var hash = this.hash; $('a[href^="#"]').removeClass('active'); $(this).addClass('active'); $('html, body').animate({ scrollTop: $(hash).offset().top - parseInt($(hash).css('padding-top')) }, 300, function() { if (history.pushState) { history.pushState(null, null, hash); } else { location.hash = hash; } }); }); $(window).on('scroll', function() { var scrollTop = $(this).scrollTop(); $('[data-section]').each(function() { var topDistance = $(this).offset().top-100; if ( (topDistance) < scrollTop ) { console.log(typeof 'href=#'+$(this).attr('id')); $('a[href^="#"]').removeClass('active'); var id = $(this).attr('id'); $("[href='#"+id+"']").addClass('active') ; } }); }); 

 body { font: 400 15px Lato, sans-serif; line-height: 1.8; color: #181818; } #about img { height: 300px; /* margin-top: 20px; */ } #about figcaption { width: 400px; } li.list-group-item { display: flex; } li.list-group-item i { margin-left: -20px; } li.list-group-item div { margin-left: 10px; } h2 { font-size: 24px; text-transform: uppercase; color: #303030; font-weight: 600; margin-bottom: 30px; /* margin-top: 20px; */ } h4 { font-size: 19px; line-height: 1.375em; color: #303030; font-weight: 400; margin-bottom: 30px; } .jumbotron { margin-top: 62px; font-family: Montserrat, sans-serif; } .jumbotron img { height: 150px; } .container-fluid { padding: 60px 50px; } .bg-grey { background-color: #f6f6f6; } .logo-small { color: #050042; font-size: 50px; } .logo { color: #050042; font-size: 200px; } .thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; } .thumbnail img { width: 100%; height: 100%; margin-bottom: 10px; } .carousel-control.right, .carousel-control.left { background-image: none; color: #050042; } .carousel-indicators li { border-color: #050042; } .carousel-indicators li.active { background-color: #050042; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; } .panel { border: 1px solid #050042; border-radius:0 !important; transition: box-shadow 0.5s; } .panel:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); } .panel-footer .btn:hover { border: 1px solid #050042; background-color: #fff !important; color: #050042; } .panel-heading { color: #fff !important; background-color: #050042 !important; /*padding: 25px;*/ border-bottom: 1px solid transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .panel-footer { background-color: white !important; } .panel-footer h3 { font-size: 32px; } .panel-footer h4 { color: #aaa; font-size: 14px; } .panel-footer .btn { margin: 15px 0; background-color: #050042; color: #fff; } .navbar { /* margin-bottom: 0; */ /* z-index: 9999; */ /* border: 0; */ /* font-size: 12px !important; */ /* line-height: 1.42857143 !important; */ /* letter-spacing: 4px; */ /* border-radius: 0; */ font-family: Montserrat, sans-serif; } /* .navbar li a, .navbar .navbar-brand { color: #fff !important; } */ .navbar-nav li a:hover, .navbar-nav li.active a { color: #050042 !important; background-color: #fff !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } footer .glyphicon { font-size: 20px; margin-bottom: 20px; color: #050042; } .slideanim {visibility:hidden;} .slide { animation-name: slide; -webkit-animation-name: slide; animation-duration: 1s; -webkit-animation-duration: 1s; visibility: visible; } @keyframes slide { 0% { opacity: 0; transform: translateY(70%); } 100% { opacity: 1; transform: translateY(0%); } } @-webkit-keyframes slide { 0% { opacity: 0; -webkit-transform: translateY(70%); } 100% { opacity: 1; -webkit-transform: translateY(0%); } } @media screen and (max-width: 768px) { .col-sm-4 { text-align: center; margin: 25px 0; } .btn-lg { width: 100%; margin-bottom: 35px; } } @media screen and (max-width: 480px) { .logo { font-size: 150px; } } #accordion {text-align: left}; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schools.com - No Copyright --> <title>Peek Solutions</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Favicon from https://realfavicongenerator.net/ --> <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png"> <link rel="manifest" href="img/favicon/site.webmanifest"> <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> <link href="node_modules/@mdi/font/css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="stylesheets/peek-solutions.css"> </head> <body> <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark justify-content-between"> <a class="navbar-brand" href="#">Peek Solutions</a> <div class="navbar-nav justify-content-end"> <a class="nav-item nav-link" href="#about">About</a> <a class="nav-item nav-link" href="#services">Services</a> <a class="nav-item nav-link" href="#contact">Contact</a> </div> </nav> <div class="jumbotron jumbotron-fluid bg-dark text-light"> <div class="container"> <div class="row"> <div class="col-sm-3"> <img class="float-right" src="img/peek-solutions-blue.svg"> </div> <div class="col-sm-9"> <h1 class="display-4">Peek Solutions</h1> <p class="lead">Pipeline Design, Operational Integrity Assessment, and Support Solutions</p> </div> </div> </div> </div> <!-- Container (About Section) --> <div id="about" class="container-fluid" data-section> <div class="row"> <div class="col-sm-6"> <h2>About us</h2><br> <h4>Peek Solutions, an independent consulting company founded by Ralf Peek, provides pipeline integrity solutions and assurance support to the energy industry, including the application of structural reliability methods to assess and ensure integrity.</h4><br> <br> <a href="#contact" class="btn btn-outline-dark btn-lg" role="button">Get in Touch</a> </div> <div class="col-sm-6"> <figure class="figure"> <img src="img/ZRB_buckle_trigger_resized_30_percent.jpg" class="figure-img img-fluid rounded" alt="Zero Radius Bend (ZRB) buckle trigger"> <figcaption class="figure-caption">A zero-radius bend (ZRB) trigger that was installed for Sarawak Shell Berhad's B12 pipeline. (From <a href="http://ascelibrary.org/doi/abs/10.1061/%28ASCE%29TE.1943-5436.0000076">Peek &amp; Kristiansen (2009)</a>).</figcaption> </figure> </div> </div> </div> <!-- Container (Services Section) --> <div id="services" class="container-fluid text-center bg-grey" data-section> <h2>SERVICES</h2> <h4>Our services include:</h4> <br> <div id="accordion"> <div class="card border-bottom-0"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Pipeline Integrity Assessment and Design </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment. </div> </div> </div> <div class="card border-bottom-0"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Structural Reliability Assessment (SRA) </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes: <ul> <li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li> <li>SRA for pipelines subject to lateral buckling under thermal expansion</li> <li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li> <li>Probabilistic response-based seismic loading assessment criteria</li> <li>Nuclear containment structural reliability assessment</li> </ul> <p>Peek Solutions can also coordinate and deliver Quantitative Risk Assessment (QRA), where necessary arranging for inputs on hydrocarbon release modeling from others. (QRA includes assessment of the consequences of failure as well as the probability of occurrence, and typically involves integration of multidisciplinary inputs, as well as inputs based on local knowledge into a model). </p> <p>Reasons to perform a Structural Reliability Analysis (SRA) or Quantitative Risk Assessment (QRA) could include:</p> <ul> <li>Extreme loadings are encountered such as ice, or geohazard loadings for which there are no established design methods and criteria.</li> <li>Operating conditions (eg wet, sour service) can strongly affect the deformation capacity of the pipe.</li> <li>Consequences of failure could be exceptionally severe.</li> <li>New technology or a new concept is being used for which there is limited experience, and ingredient uncertainties affecting the performance are different from those for standard technology.</li> <li>Where new, more reliable technology, inspection or assessment methods are used whereby uncertainties are reduced, and an adjustment in the required safety margins could be justified.</li> <li>Value of information analysis under uncertainty in essence consists of performing SRA or QRA with and without the information so that the value of the information can be assessed. Such “information” might consist for instance of a (full scale) testing program, or other investigations to reduce uncertainties.</li> <li>The loading for a pipeline is somewhere in between load- and displacement-controlled, so that existing criteria for either of these cases is not directly applicable, and a case-specific calibration of the required safety margins is needed.</li> </ul> <p>SRA and/or QRA ties together a number of aspects of design, specifications, fabrication and installation methods, monitoring, inspection and maintenance, and contingency response procedures, as all have a bearing on reliability. To include all these aspects properly typically requires a muti-disciplinary team, with expertise that typically cannot be found within a single company. Peek Solutions will assemble and engage such a team (eg by subcontracts), drawing from a network of specialists, as well as drawing from customer's expertise, practices and procedures.</p> <p>In SRA's statistical data are used to quantify uncertainties. However, in most cases there are important uncertainties for which statistical data are not available. Indeed, these dominate more often than not. Ignoring such uncertainties, or making the SRA conditional upon certain assumptions about such uncertainties can be dangerous. Therefore, Peek Solutions will assess all uncertainties, rather than only the ones for which statistical data are available, and quantify them by informed engineering judgment, engaging specialized external experts as appropriate.</p> </div> </div> </div> <div class="card border-bottom-0"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Pipeline Design or Operational Integrity Review, Assurance and/or Specification </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body"> <p>Despite the guidance available from design codes, the design process relies significantly on engineering judgment to define suitable analysis methods, and the associated assumptions, and approximations. Such judgments should be based on a knowledge of the conditions for which the safety margins in the design code have been calibrated, and how there may or may not differ from the conditions for the design under consideration. Safe and economical design requires not only state-of-the-art or beyond analysis methods, but also an understanding of differences between model and real behavior, their impact, and safety margins needed to cover the associated uncertainties. Peek Solutions can help to assure that such issues have been adequately addressed for pipeline designs where special challenges are involved.</p> <p>Design reviews can sometimes raise issues at a time when this can have a deleterious effect on project schedules. A better alternative can be to develop a robust design approach from the onset. This can be done by engaging design review at the early stages, or even by developing a Design Specification prior to FEED (Front End Engineering Design) or detailed design.</p> <p>The Design Specification includes design code interpretation (if applicable), analysis methods, and assumptions and approximations to be made, together with a pertinent example to illustrate these. Further it can include any testing programs, eg in the form of additional welding procedure qualification requirements to assure girth weld integrity under strain-based design conditions, or special in situ tests to reduce the uncertainty associated with pipe-soil interaction. Where necessary the safety margins in the Design Specification are calibrated based on structural reliability assessment to ensure that a specified target reliability level is achieved.</p> <p>In addition to design, Peek Solutions supports installation (where this can affect performance), and specification and interpretation of as-built and/or as-laid surveys.</p> </div> </div> </div> <div class="card border-bottom-0"> <div class="card-header" id="headingFour"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Concept Definition and Assessment </button> </h5> </div> <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion"> <div class="card-body"> <p>In some cases it may be expedient to perform quick evaluations of a number of concepts in order to focus on the most promising ones, or check the feasibility of an innovative one which could deliver considerable life-cycle savings, but for which there is limited or no experience. Peek Solutions can help in this process to conceive, identify, and/or assess innovative concepts. For instance, inventions by Ralf Peek include: <ul> <li>The Zero-Radius Bend (ZRB) method to reliably trigger lateral buckles in order to safely accommodate thermal expansion. This method has been successfully adopted for a number of high-temperature subsea pipelines for Sarawak Shell and others. According to a review of methods to trigger buckles for controlled thermal expansion by the <a href="http://safebuck.com/">Safebuck JIP</a>, this ZRB is the only one with 100% success in triggering the buckles as intended.</li> <li>The Pipe-Clamping Mattress (PCM) to stop pipeline walking (cf. <a href="https://www.onepetro.org/conference-paper/OTC-27815-MS>">Frankenmolen et al. (2017)</a>). This provides an effective alternative to rock dump to restrain a pipeline axially so that it will not creep like a worm under cyclic thermal expansion and contraction, thereby threatening the integrity of end connections.</li> </ul> </p> <p>To make innovation feasible, it needs to be assessed at an early stage. Peek Solutions can help by developing and assessing a feasibility-basis design at a level of detail that is sufficient to expose any devil that may be hiding in the details.</p> </div> </div> </div> <div class="card border-bottom-0"> <div class="card-header" id="headingFive"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> Research and Development </button> </h5> </div> <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion"> <div class="card-body"> <p>Peek Solutions' ambition is to contribute to improved understanding and modeling for pipeline integrity assurance, not only by its own R&D efforts, but also by being at the interface between academic research and applications to the industry, in order to make better use of academic research, but also to influence academic research programs towards matters relevant to pipeline integrity.</p> <p>Structural Reliability Assessment (SRA) provides an excellent framework to capture and quantify improved knowledge from R&D programs in terms of reduced uncertainty. The economic benefit this generates can then be assessed by a Value of Information Analysis (VIA). Conversely, SRA and VIA can also point to areas where R&D is most fruitful.</p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingSix"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> Specialized Software Development </button> </h5> </div> <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion"> <div class="card-body"> <p>Ralf Peek has experience with code development and application for Finite Element Analysis, having developed the NPEX code while at the University of Michigan, and further developed it at Shell as a workhorse for pipeline upheaval and lateral buckling analysis. Using NPEX as a starting point, Peek Solutions can efficiently develop codes for specific applications, such as lateral buckling analysis, buried pipeline subject to ice loading or offset at a fault (with the soil modeled by springs), or calculation of pipe deformation capacity without local buckling.</p> <p>Experience also includes the development of a material subroutine, VUMAT, for ABAQUS/Explicit to model undrained or drained saturated soil behavior during ice gouging over a buried pipeline.</p> </div> </div> </div> </div> </div> <!-- Container (Contact Section) --> <div id="contact" class="container-fluid" data-section> <h2 class="text-center">CONTACT</h2> <div class="row"> <div class="col-sm-5"> <p>Contact us and we'll get back to you as soon as possible.</p> <ul class="list-group list-group-flush"> <li class="list-group-item"> <i class="mdi mdi-map-marker"></i> <div>Av. St. Andreu 116<br>08392 St. Andreu de Llavaneres<br>Spain</div> </li> <li class="list-group-item"> <i class="mdi mdi-phone"></i> <div>+34 937927406<div> </li> <li class="list-group-item"> <i class="mdi mdi-email"></i> <div><a href=mailto:ralf@peek.solutions>ralf@peek.solutions</a><div> </li> </ul> </div> <form id="contactform" action="//formspree.io/ralf@peek.solutions" method="POST"> <div class="col-sm-7 slideanim"> <div class="row"> <div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div> <div class="col-sm-6 form-group"> <input class="form-control" id="email" name="_replyto" placeholder="Email" type="email" required> </div> </div> <textarea class="form-control" id="comments" name="message" placeholder="Message" rows="5"></textarea><br> <div class="row"> <div class="col-sm-12 form-group"> <button class="btn btn-default pull-right" type="submit">Send</button> </div> </div> </div> <input type="hidden" name="_next" value="//peek.solutions/confirmation.html" /> <input type="text" name="_gotcha" style="display:none" /> </form> </div> </div> <div id="googleMap" style="height:400px;width:100%;"></div> <!-- Add Google Maps --> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI"></script> <script src="js/google-map.js"></script> <footer class="container-fluid text-center"> <a href="#myPage" title="To Top"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <!-- <p>Bootstrap Theme Made By <a href="http://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p> --> </footer> <!-- <script src="js/scroll.js"></script> --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <!-- Custom JS --> <script src="js/scroll2.js"></script> </body> </html> 

Answer 2

<header>
  <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark justify-content- 
  between">
    <a class="navbar-brand" href="#">Peek Solutions</a>
    <div id="nav-items" class="navbar-nav justify-content-end">
      <a class="nav-item nav-link" href="#about">About</a>
      <a class="nav-item nav-link" href="#services">Services</a>
      <a class="nav-item nav-link" href="#contact">Contact</a>
    </div>
  </nav>
</header>

<body>
    <div data-spy="scroll" data-target="#nav-items" data-offset="0">
        <section id="about">...</section>
        <section id="services">..</section>
        <section id="contact">...</section>
    </div>
</body>

Answer 3

尝试这个

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <body data-spy='scroll' data-target='#navbar-example2' data-offset='180'> <nav id="navbar-example2" class="navbar navbar-light bg-light fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#fat">@fat</a> </li> <li class="nav-item"> <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#one">one</a> <a class="dropdown-item" href="#two">two</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#three">three</a> </div> </li> </ul> </nav> <div data-spy="scroll" data-target="#navbar-example2" data-offset="0"> <h4 id="fat">@fat</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> <h4 id="mdo">@mdo</h4> <p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p> <h4 id="one">one</h4> <p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p> <h4 id="two">two</h4> <p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p> <h4 id="three">three</h4> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat. Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p> </div> </body> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>