Bootstrap 4 手风琴滚动打开内容? [英] Bootstrap 4 Accordian scroll to open content?

查看:23
本文介绍了Bootstrap 4 手风琴滚动打开内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我知道有人问过这个问题,我正在处理提出类似问题的人的示例代码 (自举手风琴,点击时滚动到活动(打开)手风琴的顶部?),但我无法让它工作我的代码.

当移动用户点击按钮查看更多内容时,内容会在屏幕下方打开.用户不会知道它在那里.

当用户点击按钮查看内容时,我希望内容自动滚动.

这是我的代码:https://jsfiddle.net/bigtime/6yung8vk/2/

查询:

$('.panel-collapse').on('shown.bs.collapse', function(e) {var $panel = $(this).closest('.panel');$('html,body').animate({滚动顶部:$panel.offset().top}, 500);});

HTML:

<div class="accordion" id="expandInfo"><section id="yello" class="py-5"><div class="容器"><div class="row"><!--开始精选视频--><div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center"><span class="fa-stack fa-2x" style="font-size: 45px;"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-file-video fa-stack-1x aria-hidden="true""></i></span><h3 class="iconyell">精选视频</h3><p>女性自卫</p><button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">看视频</button>

<!--结束精选视频--><!-- 开始火车--><div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center"><span class="fa-stack fa-2x" style="font-size: 45px;"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa far fa-handshake fa-stack-1x aria-hidden="true""></i></span><h3 class="iconyell">和我们一起训练</h3><p>为什么你应该</p><button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">为什么是我们?</button>

<!--结束列车--><!--开始指示--><div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos"><span class="fa-stack fa-2x" style="font-size: 45px;"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fas fa-users fa-stack-1x aria-hidden="true""></i></span><h3 class="iconyell">你的导师</h3><p>了解我们</p><button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">与我们见面</button>

<!--结束指令-->

</节><!-- 可折叠元素 HTML --><!--开始视图视频区域--><div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo"><!--开始单个新闻项目--><div class="col-md-7"><div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;"><iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>

<div class="col-md-5"><h4>女子自卫课程</h4><p>这是在山姆休斯顿州立大学举办的女子自卫课程的视频.虽然观看视频不如参加课程,但从观看此在线课程中仍然可以学到很多东西.如果你练习技能视频中介绍的内容可以提高您在攻击中幸存的机会.</p><p>点击播放按钮查看课程短片.</p><div style="text-align:center"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick"/><input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q"/><input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20"></表单>

<!--结束视图视频区域--><!--开始为什么我们区域--><div id="whyUs" class="折叠行 justify-content-center mt-3 panel-collapse" data-parent="#expandInfo"><!--开始单个新闻项目--><div class="col-md-5"><div class="embed-responsive"><img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="为什么要加入Mousel's Mixed Martial Arts Academy" class="img-fluid img-缩略图圆形 mx-auto d-block">

<div class="col-md-7"><h4>为什么你会选择我们...</h4><p>分享知识并帮助他人充分发挥潜力是我们最擅长的.</p><p>武术最初是为了保命和自卫,但今天人们从各行各业来到我们这里,每个人都有自己想要在穆塞尔综合武术学院训练的一系列原因.有的想自学防守,其他人想要有竞争力的战斗,有些人寻求身体健康,而其他人只是想玩得开心.无论您选择什么原因,您都会发现其他和您一样的人在 Mousel 的综合武术学院学习.</p>

<!--结束视图视频区域--><!--开始您的讲师区域--><div id="yourInstructor" class="折叠行 justify-content-center mt-3 panel-collapse" data-parent="#expandInfo"><!--开始单个新闻项目--><div class="col-md-4"><div class="embed-responsive"><img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">

<div class="col-md-8"><h4>Tim Mousel</h4><p>Tim Mousel 是&nbsp;<a href="http://www.defend.net/">Mousel's Mixed Martial Arts Academy</a>,<a href="https://www.womens-self-defense.org/">女性自卫</a>和<a href="https://www.edge-trainer.com/>The Edge 个人训练</a>.</p><p>Tim 培训了许多休斯顿顶级武术教练,他培训的学生参加了最高水平的混合武术比赛,包括 <strong>终极格斗锦标赛</strong>(UFC),<strong>笼中之王</strong>,<strong>骄傲</strong>,全国跆拳道和泰拳锦标赛,业余和职业拳击.蒂姆还是两届世界拳击冠军的力量和体能教练<a href="http://www.reggiesweetjohnson.com/"target="_blank">Reggie Johnson</a>.</p>

<!--end yourInstructor 区域-->

<!-- end expandInfo -->

任何帮助将不胜感激!

谢谢,

蒂姆

解决方案

请看下面的代码片段

$('.panel-collapse').on('shown.bs.collapse', function(e) {var $panel = $(this).attr("id")控制台日志($面板)$('html, body').animate({scrollTop: $('#' + $panel).offset().top}, 500);});

<html lang="zh-cn"><头><title>引导示例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><身体><div class="accordion container-fluid" id="expandInfo"><section id="yello" class="py-5"><div class="容器"><div class="row"><!--开始精选视频--><div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center"><span class="fa-stack fa-2x" style="font-size: 45px;"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fa-file-video fa-stack-1x aria-hidden="true></i></span><h3 class="iconyell">精选视频</h3><p>女性自卫</p><button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">看视频</button>

<!--结束精选视频--><!-- 开始火车--><div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center"><span class="fa-stack fa-2x" style="font-size: 45px;"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa far fa-handshake fa-stack-1x aria-hidden="true""></i></span><h3 class="iconyell">和我们一起训练</h3><p>为什么你应该</p><button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">为什么是我们?</button>

<!--结束列车--><!--开始指示--><div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos"><span class="fa-stack fa-2x" style="font-size: 45px;"><i class="fa fa-circle fa-stack-2x icon-background"></i><i class="fa fas fa-users fa-stack-1x aria-hidden="true""></i></span><h3 class="iconyell">你的导师</h3><p>了解我们</p><button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">与我们见面</button>

<!--结束指令-->

</节><!-- 可折叠元素 HTML --><!--开始视图视频区域--><div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo"><!--开始单个新闻项目--><div class="col-md-7"><div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;"><iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>

<div class="col-md-5"><h4>女子自卫课程</h4><p>这是在山姆休斯顿州立大学举办的女子自卫课程的视频.虽然观看视频不如参加课程,但从观看此在线课程中仍然可以学到很多东西.如果你练习技能视频中介绍的内容可以提高您在攻击中幸存的机会.</p><p>点击播放按钮查看课程短片.</p><div style="text-align:center"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick"/><input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q"/><input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20"></表单>

<!--结束视图视频区域--><!--开始为什么我们区域--><div id="whyUs" class="折叠行 justify-content-center mt-3 panel-collapse" data-parent="#expandInfo"><!--开始单个新闻项目--><div class="col-md-5"><div class="embed-responsive"><img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="为什么要加入Mousel's Mixed Martial Arts Academy" class="img-fluid img-缩略图圆形 mx-auto d-block">

<div class="col-md-7"><h4>为什么你会选择我们...</h4><p>分享知识并帮助他人充分发挥潜力是我们最擅长的.</p><p>武术最初是为了保命和自卫,但今天人们从各行各业来到我们这里,每个人都有自己想要在穆塞尔综合武术学院训练的一系列原因.有的想自学防守,其他人想要有竞争力的战斗,有些人寻求身体健康,而其他人只是想玩得开心.无论您选择什么原因,您都会发现其他和您一样的人在 Mousel 的综合武术学院学习.</p>

<!--结束视图视频区域--><!--开始您的讲师区域--><div id="yourInstructor" class="折叠行 justify-content-center mt-3 panel-collapse" data-parent="#expandInfo"><!--开始单个新闻项目--><div class="col-md-4"><div class="embed-responsive"><img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">

<div class="col-md-8"><h4>Tim Mousel</h4><p>Tim Mousel 是 <a href="http://www.defend.net/">Mousel's Mixed Martial Arts 的所有者学院</a>、<a href="https://www.womens-self-defense.org/">女性自卫</a>和<a href="https://www.edge-trainer.com/">The Edge 个人训练</a>.</p><p>Tim 培训了许多休斯顿顶级武术教练,他培训的学生参加了最高水平的混合武术比赛,包括 <strong>终极格斗锦标赛</strong>(UFC),<strong>笼中之王</strong>,<strong>骄傲</strong>,全国跆拳道和泰拳锦标赛,业余和职业拳击.蒂姆还是两届世界拳击冠军的力量和体能教练<a href="http://www.reggiesweetjohnson.com/"target="_blank">Reggie Johnson</a>.</p>

<!--end yourInstructor 区域-->

<!-- end expandInfo --></html>

I understand this question has been asked and I'm working with sample code of someone who asked a similar question (Bootstrap accordion, scroll to top of active (open) accordion on click?), but am unable to get it to work in my code.

When a mobile user clicks on a button to view more, the content opens up below the screen. The user would have no idea it's there.

When a user clicks the button to view the content, I would like the content to be scrolled to automatically.

Here is my code: https://jsfiddle.net/bigtime/6yung8vk/2/

JQUERY:

$('.panel-collapse').on('shown.bs.collapse', function(e) {
      var $panel = $(this).closest('.panel');
      $('html,body').animate({
        scrollTop: $panel.offset().top
      }, 500);
    });

HTML:

<!--  Yellow Section   -->
<div class="accordion" id="expandInfo">
  <section id="yello" class="py-5">
    <div class="container">
      <div class="row ">
        <!--start featured video -->
        <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
          <span class="fa-stack fa-2x" style="font-size: 45px;">
  <i class="fa fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fa-file-video fa-stack-1x aria-hidden="true""></i>
</span>
          <h3 class="iconyell">Featured Video</h3>
          <p>Women's Self-Defense</p>
          <button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">SEE VIDEO</button>
        </div>
        <!--end featured video -->
        <!-- start train -->
        <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
          <span class="fa-stack fa-2x" style="font-size: 45px;">
  <i class="fa fa-circle fa-stack-2x icon-background"></i>
  <i class="fa far fa-handshake fa-stack-1x aria-hidden="true""></i>
</span>
          <h3 class="iconyell">Train With Us</h3>
          <p>Why You Should</p>
          <button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">WHY US?</button>
        </div>
        <!--end train-->

        <!--start instruct -->
        <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos">
          <span class="fa-stack fa-2x" style="font-size: 45px;">
  <i class="fa fa-circle fa-stack-2x icon-background"></i>
  <i class="fa fas fa-users fa-stack-1x aria-hidden="true""></i>
</span>
          <h3 class="iconyell">Your Instructor</h3>
          <p>Get To Know Us</p>

          <button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">MEET US</button>
        </div>
        <!--end instruct-->
      </div>
    </div>
  </section>

  <!-- Collapsible Element HTML -->
  <!--start viewVideo  area -->

  <div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo">
    <!--start single news  item -->
    <div class="col-md-7">
      <div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;">
        <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
      </div>
    </div>
    <div class="col-md-5">
      <h4>Women's Self-Defense Course</h4>
      <p>This is a video of a Women's Self-Defense Class given at Sam Houston State University. While watching a video isn't as good as attending a course, there is still a lot that can be learned from watching this online course. If you practice the skills
        presented in the video you can improve your chances of surviving an attack.</p>

      <p>Click the play button to see a short clip of the class.</p>
      <div style="text-align:center">
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick" />
          <input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q" />
          <input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20">
        </form>
      </div>
    </div>
  </div>
  <!--end viewVideo  area -->
  <!--start whyUs  area -->

  <div id="whyUs" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
    <!--start single news  item -->
    <div class="col-md-5">
      <div class="embed-responsive">
        <img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
      </div>

    </div>
    <div class="col-md-7">
      <h4>Why you sould choose us...</h4>
      <p>Sharing knowledge and helping others reach their full potential is what we do best.
      </p>
      <p>
        The martial arts were originally aimed towards life preservation and self defense, but today people come to us from all walks of life, each with their own set of reasons for wanting to train at Mousel’s Mixed Martial Arts Academy. Some want to learn self
        defense, others want to fight competitively, some seek to become physically fit and others just want to have fun. Whatever the reason you chose, you will find others just like yourself studying at Mousel’s Mixed Martial Arts Academy.
      </p>
    </div>
  </div>
  <!--end viewVideo  area -->

  <!--start yourInstructor  area -->

  <div id="yourInstructor" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
    <!--start single news  item -->
    <div class="col-md-4">

      <div class="embed-responsive">
        <img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">
      </div>
    </div>
    <div class="col-md-8">
      <h4>Tim Mousel</h4>
      <p>Tim Mousel is the owner of&nbsp;<a href="http://www.defend.net/">Mousel's Mixed Martial Arts Academy</a>,&nbsp;<a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and&nbsp;<a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.</p>
      <p>Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the <strong>Ultimate Fighting  Championship</strong> (UFC), <strong>King of the Cage</strong>,
        <strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing.  Tim was also the Strength and Conditioning Coach for two-time world boxing champion&nbsp;<a href="http://www.reggiesweetjohnson.com/"
          target="_blank">Reggie Johnson</a>.
      </p>
    </div>
  </div>
  <!--end yourInstructor  area -->
</div>
<!-- end expandInfo -->

Any assistance would be greatly appreciated!!

Thanks,

Tim

解决方案

Please have a look at below snippet

$('.panel-collapse').on('shown.bs.collapse', function(e) {
  var $panel = $(this).attr("id")
  console.log($panel)
  $('html, body').animate({
    scrollTop: $('#' + $panel).offset().top
  }, 500);
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="accordion container-fluid" id="expandInfo">
    <section id="yello" class="py-5">
      <div class="container">
        <div class="row ">
          <!--start featured video -->
          <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
            <span class="fa-stack fa-2x" style="font-size: 45px;">
              <i class="fa fa-circle fa-stack-2x icon-background"></i>
              <i class="fa fa-file-video fa-stack-1x aria-hidden=" true></i>
            </span>
            <h3 class="iconyell">Featured Video</h3>
            <p>Women's Self-Defense</p>
            <button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">SEE VIDEO</button>
          </div>
          <!--end featured video -->
          <!-- start train -->
          <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
            <span class="fa-stack fa-2x" style="font-size: 45px;">
              <i class="fa fa-circle fa-stack-2x icon-background"></i>
              <i class="fa far fa-handshake fa-stack-1x aria-hidden=" true""></i>
            </span>
            <h3 class="iconyell">Train With Us</h3>
            <p>Why You Should</p>
            <button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">WHY US?</button>
          </div>
          <!--end train-->

          <!--start instruct -->
          <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos">
            <span class="fa-stack fa-2x" style="font-size: 45px;">
              <i class="fa fa-circle fa-stack-2x icon-background"></i>
              <i class="fa fas fa-users fa-stack-1x aria-hidden=" true""></i>
            </span>
            <h3 class="iconyell">Your Instructor</h3>
            <p>Get To Know Us</p>

            <button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">MEET US</button>
          </div>
          <!--end instruct-->
        </div>
      </div>
    </section>

    <!-- Collapsible Element HTML -->
    <!--start viewVideo  area -->

    <div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo">
      <!--start single news  item -->
      <div class="col-md-7">
        <div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;">
          <iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
        </div>
      </div>
      <div class="col-md-5">
        <h4>Women's Self-Defense Course</h4>
        <p>This is a video of a Women's Self-Defense Class given at Sam Houston State University. While watching a video isn't as good as attending a course, there is still a lot that can be learned from watching this online course. If you practice the skills
          presented in the video you can improve your chances of surviving an attack.</p>

        <p>Click the play button to see a short clip of the class.</p>
        <div style="text-align:center">
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
            <input type="hidden" name="cmd" value="_s-xclick" />
            <input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q" />
            <input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20">
          </form>
        </div>
      </div>
    </div>
    <!--end viewVideo  area -->
    <!--start whyUs  area -->

    <div id="whyUs" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
      <!--start single news  item -->
      <div class="col-md-5">
        <div class="embed-responsive">
          <img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
        </div>

      </div>
      <div class="col-md-7">
        <h4>Why you sould choose us...</h4>
        <p>Sharing knowledge and helping others reach their full potential is what we do best.
        </p>
        <p>
          The martial arts were originally aimed towards life preservation and self defense, but today people come to us from all walks of life, each with their own set of reasons for wanting to train at Mousel’s Mixed Martial Arts Academy. Some want to learn self
          defense, others want to fight competitively, some seek to become physically fit and others just want to have fun. Whatever the reason you chose, you will find others just like yourself studying at Mousel’s Mixed Martial Arts Academy.
        </p>
      </div>
    </div>
    <!--end viewVideo  area -->

    <!--start yourInstructor  area -->

    <div id="yourInstructor" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
      <!--start single news  item -->
      <div class="col-md-4">

        <div class="embed-responsive">
          <img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">
        </div>
      </div>
      <div class="col-md-8">
        <h4>Tim Mousel</h4>
        <p>Tim Mousel is the owner of&nbsp;<a href="http://www.defend.net/">Mousel's Mixed Martial Arts
            Academy</a>,&nbsp;<a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and&nbsp;<a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.</p>
        <p>Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the <strong>Ultimate Fighting Championship</strong> (UFC), <strong>King of the Cage</strong>,
          <strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing. Tim was also the Strength and Conditioning Coach for two-time world boxing champion&nbsp;<a href="http://www.reggiesweetjohnson.com/"
            target="_blank">Reggie Johnson</a>.
        </p>
      </div>
    </div>
    <!--end yourInstructor  area -->
  </div>
  <!-- end expandInfo -->

</body>

</html>

这篇关于Bootstrap 4 手风琴滚动打开内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆