ACF中repeater字段Boostrap选项卡 _twitter-bootstrap

我正在尝试将Bootstrap选项卡与ACF集成。
但是, 当我创建多个标签时, 应该如何提取数据？
当我此时使用标签时, 可以用这种方式拉动, 但是当我使用多个标签时, 该怎么办？
如何创建一个循环以使用多个选项卡？
如何提取Tab链接和内容？
前端代码

< !-- tab start --> < div class="row mar0 tabrk"> < ul class="tabnav nav-pills"> < li class="active"> < a data-toggle="pill" href="http://www.srcmini.com/#home"> < img class="img-responsive" src="http://www.srcmini.com/logo.png"> < /a> < /li> < li> < a data-toggle="pill" href="http://www.srcmini.com/#menu1"> < img class="img-responsive" src="http://www.srcmini.com/logo.png"> < /a> < /li> < /ul> < div class="tabbody tab-content"> < div id="home" class="tab-pane fade in active"> < ul> < li> < div class="media"> < div class="media-left" style="border-color: #ecb319; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/1.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #ecb319; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color: #a8bbe1; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/2.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #a8bbe1; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color: #3dd0d9; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/3.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #3dd0d9; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color: #8a8065; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/4.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #8a8065; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color: #a4d46b; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/5.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #a4d46b; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color: #164f9c; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/6.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #164f9c; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color:#f0441c; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/7.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #f0441c; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color: #9c6cb2; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/8.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #9c6cb2; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < li> < div class="media"> < div class="media-left" style="border-color:#17dfc0; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/images/marka/9.png"> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: #17dfc0; "> Asset Management< /h4> < p> Allow healthcare facilities to easily determine the exact location of tagged assets to reduce equipment shrinkage/hoarding, decrease the time staff spend searching for equipment, and automate PAR-level management.< /p> < /div> < /div> < /li> < /ul> < /div> < div id="menu1" class="tab-pane fade"> < h3> Menu 1< /h3> < p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.< /p> < /div> < /div> < /div> < !-- tab end -->

现在：

< div class="row mar0 tabrk"> < ul class="tabnav nav-pills"> < ?php $image = get_field('marka_logo'); ?> < li class="active"> < a data-toggle="pill" href="http://www.srcmini.com/#home"> < img class="img-responsive" src="http://www.srcmini.com/< ?php echo $image['url']; ?> "> < /a> < /li> < /ul> < div class="tabbody tab-content"> < div id="home" class="tab-pane fade in active"> < ul> < ?php// check if the repeater field has rows of dataif( have_rows('marka_ozellikler') ):// loop through the rows of datawhile ( have_rows('marka_ozellikler') ) : the_row(); ?> < li> < div class="media"> < div class="media-left" style="border-color: < ?php the_sub_field('marka_color'); ?> ; "> < a href="http://www.srcmini.com/#"> < img class="media-object" src="http://www.srcmini.com/< ?php the_sub_field('marka_sol_gorsel'); ?> "> < /a> < /div> < div class="media-body"> < h4 class="media-heading" style="color: < ?php the_sub_field('marka_color'); ?> ; "> < ?php the_sub_field('marka_baslik'); ?> < /h4> < p> < ?php the_sub_field('marka_aciklama'); ?> < /p> < /div> < /div> < /li> < ?phpendwhile; else :// no rows foundendif; ?> < /ul> < /div> < /div> < /div>

我想要的是：
图片：
谢谢
#1因此, 你将不得不执行两个while(have_rows(‘ repeater’ )){}。一个用于选项卡, 一个用于内容。
【ACF中repeater字段Boostrap选项卡】例子：

< div class="tabs"> < ?php while(have_rows('repeater')) : the_row(); ?> < div class="tab"> < ?php the_sub_field('tab_name'); ?> < /div> < ?php endwhile; ?> < /div> < div class="tabs-content"> < ?php while(have_rows('repeater')) : the_row(); ?> < div class="tab-content"> < ?php the_sub_field('tab_content'); ?> < /div> < ?php endwhile; ?> < /div>