如何让Bootstrap Scrollspy使用活动的li类

时间：2015-07-22 19:14:10

标签： javascript jquery html css twitter-bootstrap

我无法让bootstrap scrollspy在我的网站上运行。 我尝试了属性和js，但都没有工作。如果我单击导航栏中的链接，它会跳转到页面的某个部分但滚动不起作用。

HTML 

<!-- HEADER
============================================== -->
<header class="site-header" role="banner">


    <!-- NAVBAR
    ============================================== -->
    <div class="navbar-wrapper">

        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"<img src="assets/img/cohnhead-productions3.jpg" alt="CohnHead Productions Logo"></a>
                </div><!-- navbar-header -->
                <div class="navbar-collapse collapse" id="target-nav">
                    <ul class="nav navbar-nav navbar-right nav nav-pills">
                        <li class="active"><a href="#home-nav">Home</a></li>
                        <li><a href="#about-nav">About</a></li>
                        <li><a href="#services-nav">Services</a></li>
                        <li><a href="#players-nav">Players</a></li>
                        <li><a href="#hire us-nav">Hire Us</a></li>
                        <li><a href="#affiliates-nav">Affiliates</a></li>
                    </ul>
                </div><!-- navbar-collapse -->
            </div><!-- container -->

        </div><!-- navbar -->

    </div><!-- navbar-wrapper -->

</header>



<!-- HERO   
============================================== -->  
<section id="hero" data-type="background" data-speed="5">
    <article>
        <a id="home-nav" name="home-nav"></a>
        <div class="container-fluid clearfix">
            <div class="row">

                <div class="col-md-12 bgimage">
                    <h1>Welcome to CohnHead Productions</h1>
                    <p class="lead">We <strong>know</strong> what the next level <strong>requires</strong>!</p>
                    <div class="text-center">
                        <a href="#services" class="btn btn-warning btn-lg" role="button">Learn more</a>
                    </div>
                    <div class="bgimage-inside">

                    </div><!-- bg image -->
                    <i class="fa fa-arrow-circle-o-down fa-4x"></i>
                </div><!-- col -->

            </div><!-- row -->
        </div><!-- container -->
    </article>
</section><!-- hero -->

<!-- ABOUT SECTION
============================================== -->
<section id="about">
    <a id="about-nav" name="about-nav"></a>
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">About</h2>
            <div class="seperator">
                <span></span>
            </div>
            <h4 class="subtitle">Isaiah Cohn, Owner of CohnHead Productions</h4>
            <div class="col-md-4">
                <img class="img-responsive"src="assets/img/Isaiah.jpg" alt="Isaiah Cohn, Owner of CohnHead Productions">
            </div><!-- col -->

            <div class="col-md-8">
                <p class="paragraph-text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt odit delectus excepturi, unde aperiam explicabo, ducimus harum, temporibus eaque dolorum blanditiis, cumque voluptates! Ipsa, non. Quam, eos fuga assumenda quis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, id possimus sit distinctio minima expedita vero aliquid. Aliquid officia reprehenderit earum, et enim odio, expedita fuga dolorem, modi aliquam molestiae.</span><br>

                <span>Veritatis mollitia, tenetur saepe totam nam accusantium! Autem dignissimos cupiditate nihil libero minus magni quod impedit dicta repellendus. Ipsam quos deserunt illum pariatur delectus officiis totam optio porro voluptatum, est? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus harum, qui totam eligendi quod doloremque iure sint, eveniet quis ut nostrum! Quasi consequuntur nemo doloremque laboriosam mollitia tenetur, earum! Laborum.</span><br>

                <span>Error laboriosam officiis quae quaerat enim hic voluptas architecto sequi, aperiam eaque reiciendis, natus voluptate officia ipsum culpa veritatis pariatur. Laudantium at consectetur, provident molestias obcaecati iste inventore quasi cumque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus porro, quos fugiat, inventore repudiandae ullam unde sed quis a soluta earum doloremque quas. Illo qui, dolorum. Vel eos, similique aspernatur.</span> </p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- SERVICES
============================================== -->
<section id="services">
    <a id="services-nav" name="services-nav"></a>
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">Services</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">We specialize in creating Professional Highlight Tapes.</h4>
            <div class="col-sm-4">
                <i class="fa fa-film fa-3x">
                    <p>Video</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->

            <div class="col-sm-4">
                <i class="fa fa-mobile fa-3x">
                    <p>Contact</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->

            <div class="col-sm-4">
                <i class="fa fa-user fa-3x">
                    <p>Sign</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- PLAYERS
============================================== -->
<section id="players">
    <a id="players-nav" name="players-nav"></a>
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">Players</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">Take a look at some of the players we have helped.</h4>

            <div class="col-md-4">
                <h5 class="players">Chinedu Arinze</h5>
                <img class="player-img" src="assets/img/chinedu.jpg" alt="Chinedu Arinze">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/OQzXulLUurI" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

            <div class="col-md-4">
                <h5 class="players">Jason King</h5>
                <img class="player-img jason" src="assets/img/jason.jpg" alt="Jason King">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/1t0snoFXvNI" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

            <div class="col-md-4">
                <h5 class="players">Juergen Williams</h5>
                <img class="player-img" src="assets/img/juergen.jpg" alt="Juergen Williams">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/7AhAiJkVwSg" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- HIRE US
============================================== -->
<section id="hire-us">
    <div class="container">
        <div class="row">
            <h2 class="text-center">Hire Us</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">We'd love to work with you, please use this form to contact us.</h4>
            <div class="col-sm-6 col-centered">
                <form role="form clearfix">
                  <div class="form-group">
                    <label for="contact-email" class="sr-only">Email address</label>
                    <input type="email" class="form-control input-lg" id="contact-email" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label for="contact-password" class="sr-only">Password</label>
                    <input type="password" class="form-control input-lg" id="contact-password" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <label for="contact-words" class="sr-only">Message</label>
                    <textarea name="" id="contact-words" cols="30" rows="10" class="form-control input-lg"></textarea>
                  </div>
                  <input type="submit" class="btn btn-warning btn-lg pull-right">
                </form>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- AFFILIATES
============================================== -->
<section>

</section>


<!-- FOOTER
============================================== -->
<section>

</section>


<!-- BOOTSRAP CORE JAVASCRIPT
Placed at the end of the document so the pages load faster!
============================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="assets/js/jquery-2.1.4.min.js"></script>

<script src="assets/js/bootstrap.js"></script>

<script src="assets/js/custom.js"></script>

的Javascript 

$('body').scrollspy({ target: '#target-nav' });

1 个答案:

答案 0 :(得分：1)

夫妻问题：

  1. According to the docs：
    2.   

    所需的可解析ID目标
      导航栏链接必须具有可解析的ID目标。例如，<a href="#home">home</a>必须与DOM中的某些内容相对应，例如<div id="home"></div>。

    因此，为了让bootstrap自动添加类.active，导航栏中的每个锚必须解析为文档中的ID：

    <li class="active"><a href="#home-nav">Home</a></li>
<li><a href="#about-nav">About</a></li>
<li><a href="#services-nav">Services</a></li>
<li><a href="#players-nav">Players</a></li>
<li><a href="#hire us-nav">Hire Us</a></li>
<li><a href="#affiliates-nav">Affiliates</a></li>

    请注意，这是hire us-nav的问题，它不是有效的ID，而players-nav不存在。

    1. According to the docs：
      2.   

      非：忽略可见目标元素
        非:visible according to jQuery的目标元素将被忽略，其相应的导航项将永远不会突出显示。

      我怀疑你的案例中实际发生的事情是做的空主要元素中有ID，因为它们是空的，所以是不可见的。

      要测试这个 - 打开控制台（如果您正在测试堆栈片段，请确保选择片段加载到的帧），然后运行以下代码：

      $("#about-nav").is(":visible")

      如果返回false，则Bootstrap不使用它：

      Screenshot of Console

      而不是将ID放在下面的空锚标签中：

      <a id="about-nav" name="about-nav"></a>

      你应该摆脱空锚元素并将它们放在你的section中：

      <section id="about-nav">

      这是使用Stack Snippets

      的工作演示 

      $(function(){
  $('body').scrollspy({ target: '#navbar-example' })
});
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<!-- HEADER
============================================== -->
<header class="site-header" role="banner">


    <!-- NAVBAR
    ============================================== -->
    <div class="navbar-wrapper">

        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="navbar-example">

            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" 
                            data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">
                      <img src="assets/img/cohnhead-productions3.jpg" alt="CohnHead Productions Logo"/>
                  </a>
                </div><!-- navbar-header -->
                <div class="navbar-collapse collapse" id="target-nav">
                    <ul class="nav navbar-nav navbar-right nav nav-pills">
                        <li class="active"><a href="#home-nav">Home</a></li>
                        <li><a href="#about-nav">About</a></li>
                        <li><a href="#services-nav">Services</a></li>
                        <li><a href="#players-nav">Players</a></li>
                        <li><a href="#hire-us-nav">Hire Us</a></li>
                        <li><a href="#affiliates-nav">Affiliates</a></li>
                    </ul>
                </div><!-- navbar-collapse -->
            </div><!-- container -->

        </div><!-- navbar -->

    </div><!-- navbar-wrapper -->

</header>



<!-- HERO   
============================================== -->  
<section id="home-nav" data-type="background" data-speed="5">
    <article>
        <div class="container-fluid clearfix">
            <div class="row">

                <div class="col-md-12 bgimage">
                    <h1>Welcome to CohnHead Productions</h1>
                    <p class="lead">
                      We <strong>know</strong> what the next level <strong>requires</strong>!
                    </p>
                    <div class="text-center">
                        <a href="#services" class="btn btn-warning btn-lg" role="button">
                          Learn more
                      </a>
                    </div>
                    <div class="bgimage-inside">

                    </div><!-- bg image -->
                    <i class="fa fa-arrow-circle-o-down fa-4x"></i>
                </div><!-- col -->

            </div><!-- row -->
        </div><!-- container -->
    </article>
</section><!-- hero -->

<!-- ABOUT SECTION
============================================== -->
<section id="about-nav">
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">About</h2>
            <div class="seperator">
                <span></span>
            </div>
            <h4 class="subtitle">Isaiah Cohn, Owner of CohnHead Productions</h4>
            <div class="col-md-4">
                <img class="img-responsive"src="assets/img/Isaiah.jpg" alt="Isaiah Cohn, Owner of CohnHead Productions">
            </div><!-- col -->

            <div class="col-md-8">
                <p class="paragraph-text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt odit delectus excepturi, unde aperiam explicabo, ducimus harum, temporibus eaque dolorum blanditiis, cumque voluptates! Ipsa, non. Quam, eos fuga assumenda quis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, id possimus sit distinctio minima expedita vero aliquid. Aliquid officia reprehenderit earum, et enim odio, expedita fuga dolorem, modi aliquam molestiae.</span><br>

                <span>Veritatis mollitia, tenetur saepe totam nam accusantium! Autem dignissimos cupiditate nihil libero minus magni quod impedit dicta repellendus. Ipsam quos deserunt illum pariatur delectus officiis totam optio porro voluptatum, est? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus harum, qui totam eligendi quod doloremque iure sint, eveniet quis ut nostrum! Quasi consequuntur nemo doloremque laboriosam mollitia tenetur, earum! Laborum.</span><br>

                <span>Error laboriosam officiis quae quaerat enim hic voluptas architecto sequi, aperiam eaque reiciendis, natus voluptate officia ipsum culpa veritatis pariatur. Laudantium at consectetur, provident molestias obcaecati iste inventore quasi cumque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus porro, quos fugiat, inventore repudiandae ullam unde sed quis a soluta earum doloremque quas. Illo qui, dolorum. Vel eos, similique aspernatur.</span> </p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- SERVICES
============================================== -->
<section id="services-nav">
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">Services</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">We specialize in creating Professional Highlight Tapes.</h4>
            <div class="col-sm-4">
                <i class="fa fa-film fa-3x">
                    <p>Video</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->

            <div class="col-sm-4">
                <i class="fa fa-mobile fa-3x">
                    <p>Contact</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->

            <div class="col-sm-4">
                <i class="fa fa-user fa-3x">
                    <p>Sign</p>
                </i>
                <p class="paragraph-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime accusantium, vel consectetur alias dolorem. Nulla numquam excepturi iste temporibus. Beatae, nostrum sapiente quae voluptas at error eaque a modi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, et repellendus quia delectus saepe asperiores eum, quas perferendis, provident laudantium ut tempore aliquam. Nobis itaque officia, blanditiis. Totam, qui iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quia eligendi, ad quo et nihil maxime minima eius! Quae nihil unde voluptate quod adipisci aliquam magni quam illum deserunt minus.
                </p>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- PLAYERS
============================================== -->
<section id="players-nav">
    <div class="container clearfix">
        <div class="row">
            <h2 class="text-center">Players</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">Take a look at some of the players we have helped.</h4>

            <div class="col-md-4">
                <h5 class="players">Chinedu Arinze</h5>
                <img class="player-img" src="assets/img/chinedu.jpg" alt="Chinedu Arinze">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/OQzXulLUurI" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

            <div class="col-md-4">
                <h5 class="players">Jason King</h5>
                <img class="player-img jason" src="assets/img/jason.jpg" alt="Jason King">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/1t0snoFXvNI" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

            <div class="col-md-4">
                <h5 class="players">Juergen Williams</h5>
                <img class="player-img" src="assets/img/juergen.jpg" alt="Juergen Williams">
                <p class="paragraph-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quod facilis eaque repellat mollitia pariatur saepe unde cupiditate consequatur minima eligendi, vel omnis, quam voluptatem nesciunt rem, ut placeat eius. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, magni voluptates minima! Voluptas quasi dolores, repellendus asperiores rerum earum omnis vel dicta, cum iure culpa expedita. Ad accusantium reprehenderit alias!</p>

                <iframe width="350" height="300" src="https://www.youtube.com/embed/7AhAiJkVwSg" frameborder="0" allowfullscreen>
                </iframe>
            </div><!-- col -->

        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- HIRE US
============================================== -->
<section id="hire-us-nav">
    <div class="container">
        <div class="row">
            <h2 class="text-center">Hire Us</h2>
            <div class="seperator">
                <span></span>
            </div><!-- seperator -->
            <h4 class="subtitle">We'd love to work with you, please use this form to contact us.</h4>
            <div class="col-sm-6 col-centered">
                <form role="form clearfix">
                  <div class="form-group">
                    <label for="contact-email" class="sr-only">Email address</label>
                    <input type="email" class="form-control input-lg" id="contact-email" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <label for="contact-password" class="sr-only">Password</label>
                    <input type="password" class="form-control input-lg" id="contact-password" placeholder="Password">
                  </div>
                  <div class="form-group">
                    <label for="contact-words" class="sr-only">Message</label>
                    <textarea name="" id="contact-words" cols="30" rows="10" class="form-control input-lg"></textarea>
                  </div>
                  <input type="submit" class="btn btn-warning btn-lg pull-right">
                </form>
            </div><!-- col -->
        </div><!-- row -->
    </div><!-- container -->
</section>


<!-- AFFILIATES
============================================== -->
<section>

</section>


<!-- FOOTER
============================================== -->
<section>

</section>

相关问题
最新问题