html - Bootstrap 4：面板没有消失
问题描述
我正在使用 Bootstrap 4，但我遇到了困难。在这个页面wyckofftwosmartcookies.com上，食谱部分有三个选项卡，然后是一个垂直导航，可以在 cookie 类型之间进行选择。
第一个显示正确，然后当您切换 cookie 而不是褪色第一个剩余时，下一个选择出现在下方。我花了最后三个小时看这个并且遗漏了一些明显的东西。任何帮助或建议在哪里寻找将不胜感激。需要为我女儿的项目完成这项工作=）
body{max-width:1440px;margin:auto;background-color:#f6f6f6}
#mobile-recipies{display:none}
#recipie-selector-desktop{display:none}
#mobile-selector{display: block}
.mor img {width:40%}
.hero-background{background-image:url("2 smart cookies hero desktop.jpg");background-repeat: no-repeat;height:500px}
.hero-headline{font-family:'Permanent Marker';color:#000111;font-size:36px}
.cookiefont-white{font-family:'Cookie',cursive ;font-size:1.5em;padding:24 0 0px;color:#666;font-weight:400}
.bg-drkgreen {background-color:#166937}
.bg-black{background-color:#232020}
.bg-orange{background-color:#F7941D}
.bg-blue{background-color:#3A71B8}
.font-white{color:#fff}
.section-lead-copy{font-family:'pacifico';font-size:24px;color:#888888;text-align: center}
.menu-item-font-white{font-family:'Cookie';font-size:20px;color:#666666;text-align: center}
.description-header{font-family:'Cookie';font-size:22px ;font-weight:600;color:#FFFFFF;text-align: center}
.spacer{padding-top:65px; padding-bottom:45px}
.spacer-b{padding-top:35px; padding-bottom:5px}
.spacer-c{padding-top:15px; padding-bottom:5px}
.spacer-d{padding-top:10px}
img.center {display: block;margin: 0 auto}
/* recipie box */
#mobile-recipies .btn-link {color:#000000}
#recipie-desktop a{color:#000000}
#recipie-desktop .nav-link.active {background-color:#000000;color:#FFFFFF;font-family:'pacifico'}
#recipie-desktop ul{padding-left: 3px}
.mb-0{font-family:'pacifico';color:#000}
.card-header{background-color:#ffffff}
.border-box{width:100%; border:dotted medium #000;border-radius: 5px;max-height: 700px}
.recipie-headline{font-family: 'pacifico';font-weight:400;font-size:30px;color:#000}
.recipie-subheadline{font-family:'roboto';font-size:14px;color:#999}
/* Ecommerce Styling */
.rep-product-Headline{font-family:'roboto';font-height:18px;color:#000000}
.rep-product-description{font-family:'roboto';font-size:16px;color:#888}
.rep-product-price{font-family:'Permanent Marker';font-size:45px}
.rep-image-box{width:50px;height:75px}
.ecomm-format button{background-color:#f6f6f6;font-family:'roboto';color:#000;width:200px;border:1px solid #000;font-size:24px;font-weight:bold}
.ecomm-format img {width:250px;height:275px}
@media (max-width: 995px){
#recipie-selector-desktop{display:none}
#mobile-selector{display: block}
.mor img {width:40%}
#ecomm-format img{width:200px; height:225px}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="recipie-desktop">
<div class ="container-fluid">
<div class = "border-box">
<div class ="recipie-headline"> Four Awesome Cookie Mixes </div>
<hr>
<div class ="spacer-c"></div>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-sfcatc-tab" data-toggle="pill" href="#v-pills-sfcatc" role="tab" aria-controls="v-pills-sfcatc-tab" aria-selected="true">Santa's Favorite Cookies</a>
<a class="nav-link" id="v-pills-wsc-tab" data-toggle="pill" href="#v-pills-wsc" role="tab" aria-controls="v-pills-wsc-tab" aria-selected="false">Wintry Sugar Cookies</a>
<a class="nav-link" id="v-pills-rc-tab" data-toggle="pill" href="#v-pills-rc" role="tab" aria-controls="v-pills-rc-tab" aria-selected="false">Reindeer Cookies</a>
<a class="nav-link" id="v-pills-ccoc-tab" data-toggle="pill" href="#v-pills-ccoc" role="tab" aria-controls="v-pills-ccoc-tab" aria-selected="false">Chocolate Chip & Oatmeal Cookies</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-sfcatc" role="tabpanel" aria-labelledby="v-pills-sfcatc-tab">
<div hidden id="snipcart" data-api-key="NmM2YTU4NzUtZGUwZS00OTAwLWFiZTEtNDQ2ZmE5ZTQwMDEzNjM2ODY4NTk3OTAxMjYwMDA5"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.js"></script>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-sfcatc-tab" data-toggle="tab" href="#nav-sfcatc" role="tab" aria-controls="nav-sfcatc-tab" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-sfcd-tab" data-toggle="tab" href="#nav-sfcd" role="tab" aria-controls="nav-sfcd-tab" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-sfcv-tab" data-toggle="tab" href="#nav-sfcv" role="tab" aria-controls="nav-sfcv-tab" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-sfcatc" role="tabpanel" aria-labelledby="nav-sfcatc-tab">
<div class = "row">
<div class ="col-5" >
<div class ="spacer-c"></div>
<div class="ecomm-format"><img src="sfcjar.png"></div>
</div>
<div class ="col-4">
<div class ="spacer-c"></div>
<div class ="rep-product-Headline">Holiday M&M Cookie Mix in a decorative 16oz Jar</div>
<div class ="rep-product-price">$11.99</div>
<div class ="spacer-d"></div>
<div class ="ecomm-format">
<button class="snipcart-add-item" data-item-id="Santa's Favorite Cookies" data-item-price="11.99" data-item-url="/product/Santas-favorite-cookie-jar" data-item-description="M&M Cookie Mix"data-item-image="sfcjar.png" data-item-name="Santa's Favorite M&M Cookie">Order Now</button></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcd" role="tabpanel" aria-labelledby="nav-sfcd-tab">
<div class ="row">
<div class ="col-4">
<br>
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>¾ cup( 1 and ½ sticks) unsalted butter,softened</li>
<li>1 large egg</li>
<li>½ tablespoon vanilla extract</li>
</ul>
</div>
<div class ="col-6">
<br>
<div class ="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 350 degrees F. </li>
<li>Beat butter, egg, and vanilla extract in large mixing bowl until blended. </li>
<li>Add mason jar mix and mix well. </li>
<li>Drop by rounded tablespoon onto parchment paper lined baking sheet. </li>
<li>Bake for 9 to 11 minutes or until lightly golden brown. </li>
<li>Cool on baking sheets for 2 minutes before moving to cooling rack. </li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcv" role="tabpanel" aria-labelledby="nav-sfcv-tab">video</div>
</div>
</div></div>
<div class="tab-pane fade" id="v-pills-wsc" role="tabpanel" aria-labelledby="v-pills-wsc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-wscatc-tab" data-toggle="tab" href="#nav-wscatc" role="tab" aria-controls="nav-wscatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-wscd-tab" data-toggle="tab" href="#nav-wscd" role="tab" aria-controls="nav-wscd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-wscv-tab" data-toggle="tab" href="#nav-wscv" role="tab" aria-controls="nav-wscv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show " id="nav-wscatc" role="tabpanel" aria-labelledby="nav-wscatc-tab">wsc atc</div>
<div class="tab-pane fade" id="nav-wscd" role="tabpanel" aria-labelledby="nav-wscd-tab">
<div class ="row">
<div class ="col-4">
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup unsalted butter(softened)</li>
<li>1 egg, room temperature</li>
<li>½ teaspoon vanilla extract</li>
<li>½ cup sour cream</li>
</ul>
</div>
<div class ="col-6">
<div class ="recipie-subheadline">Directions:</div>
<ul>
</li>
<li>Mix all ingredients together and roll out to ¼ inch thickness on lightly floured surface.</li>
<li>Chill dough for about an hour before using cookie cutters to shape. Add sprinkles if desired.</li>
<li>Bake at 350 degrees for 10 to 12 minutes(do not overbake)</li>
</ul>
</div>
</div></div>
<div class="tab-pane fade" id="nav-wscv" role="tabpanel" aria-labelledby="nav-wscv-tab">Video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-rc" role="tabpanel" aria-labelledby="v-pills-rc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-rcatc-tab" data-toggle="tab" href="#nav-rcatc" role="tab" aria-controls="nav-rcatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-rcdir-tab" data-toggle="tab" href="#nav-rcdir" role="tab" aria-controls="nav-rcdir" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-rcvid-tab" data-toggle="tab" href="#nav-rcvid" role="tab" aria-controls="nav-rcvid" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-rc" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-rcatc" role="tabpanel" aria-labelledby="nav-rcatc-tab">ATC</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-rcdir-tab">
<div class ="row">
<div class ="col-4">
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup softened butter</li>
<li>1 egg </li>
<li>1 teaspoon vanilla</li>
</ul>
</div>
<div class ="col-6">
<div class ="recipie-subheadline">Directions:</div>
<ul>
<li>Dump jar in a large mixing bowl</li>
<li>add ½ cup softened butter</li>
<li>add 1 egg</li><li>add 1 teaspoon vanilla.</li>
<li>Mix well and drop onto a cookie sheet lined with parchment paper. </li>
<li>Bake at 375 degrees for 8 to 10 minutes</li>
</ul>
</div>
</div></div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-rcvid-tab">RC Video</div>
</div> </div>
<div class="tab-pane fade" id="v-pills-ccoc" role="tabpanel" aria-labelledby="v-pills-ccoc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-ccocatc-tab" data-toggle="tab" href="#nav-ccocatc" role="tab" aria-controls="nav-ccocatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-ccocd-tab" data-toggle="tab" href="#nav-ccocd" role="tab" aria-controls="nav-ccocd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-ccocv-tab" data-toggle="tab" href="#nav-ccocv" role="tab" aria-controls="nav-ccocv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-ccocatc" role="tabpanel" aria-labelledby="nav-ccocatc-tab">atc ccoc</div>
<div class="tab-pane fade" id="nav-ccocd" role="tabpanel" aria-labelledby="nav-ccocd-tab">
<div class ="row">
<div class ="col-4">
<div class ="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>1 egg, slightly beaten</li>
<li>1 teaspoon vanilla extract</li>
<li>1 stick butter, softened</li>
</ul>
</div>
<div class ="col-6">
<div class ="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 375 degrees.</li>
<li>Empty jar contents into a large mixing bowl</li>
<li>Add the egg</li>, <li>Add the vanilla</li>
<li> Add the butter and mix well</li>
<li>Drop by spoonfuls onto an ungreased cookie sheet about 2 inches apart</li>
<li>Bake for 8 to 10 minutes or until the edges are golden brown</li>
<li>Remove to a wire rack and let cool</li>
</ul>
</div>
</div></div>
<div class="tab-pane fade" id="nav-ccocv" role="tabpanel" aria-labelledby="nav-ccocv-tab">ccoc v</div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script> 解决方案
您的 HTML 代码有问题。
在这个 divtab-content中，您还没有添加所有的tab-panediv。
希望这会帮助你。
body {
max-width: 1440px;
margin: auto;
background-color: #f6f6f6
}
#mobile-recipies {
display: none
}
#recipie-selector-desktop {
display: none
}
#mobile-selector {
display: block
}
.mor img {
width: 40%
}
.hero-background {
background-image: url("2 smart cookies hero desktop.jpg");
background-repeat: no-repeat;
height: 500px
}
.hero-headline {
font-family: 'Permanent Marker';
color: #000111;
font-size: 36px
}
.cookiefont-white {
font-family: 'Cookie', cursive;
font-size: 1.5em;
padding: 24 0 0px;
color: #666;
font-weight: 400
}
.bg-drkgreen {
background-color: #166937
}
.bg-black {
background-color: #232020
}
.bg-orange {
background-color: #F7941D
}
.bg-blue {
background-color: #3A71B8
}
.font-white {
color: #fff
}
.section-lead-copy {
font-family: 'pacifico';
font-size: 24px;
color: #888888;
text-align: center
}
.menu-item-font-white {
font-family: 'Cookie';
font-size: 20px;
color: #666666;
text-align: center
}
.description-header {
font-family: 'Cookie';
font-size: 22px;
font-weight: 600;
color: #FFFFFF;
text-align: center
}
.spacer {
padding-top: 65px;
padding-bottom: 45px
}
.spacer-b {
padding-top: 35px;
padding-bottom: 5px
}
.spacer-c {
padding-top: 15px;
padding-bottom: 5px
}
.spacer-d {
padding-top: 10px
}
img.center {
display: block;
margin: 0 auto
}
/* recipie box */
#mobile-recipies .btn-link {
color: #000000
}
#recipie-desktop a {
color: #000000
}
#recipie-desktop .nav-link.active {
background-color: #000000;
color: #FFFFFF;
font-family: 'pacifico'
}
#recipie-desktop ul {
padding-left: 3px
}
.mb-0 {
font-family: 'pacifico';
color: #000
}
.card-header {
background-color: #ffffff
}
.border-box {
width: 100%;
border: dotted medium #000;
border-radius: 5px;
max-height: 700px
}
.recipie-headline {
font-family: 'pacifico';
font-weight: 400;
font-size: 30px;
color: #000
}
.recipie-subheadline {
font-family: 'roboto';
font-size: 14px;
color: #999
}
/* Ecommerce Styling */
.rep-product-Headline {
font-family: 'roboto';
font-height: 18px;
color: #000000
}
.rep-product-description {
font-family: 'roboto';
font-size: 16px;
color: #888
}
.rep-product-price {
font-family: 'Permanent Marker';
font-size: 45px
}
.rep-image-box {
width: 50px;
height: 75px
}
.ecomm-format button {
background-color: #f6f6f6;
font-family: 'roboto';
color: #000;
width: 200px;
border: 1px solid #000;
font-size: 24px;
font-weight: bold
}
.ecomm-format img {
width: 250px;
height: 275px
}
@media (max-width: 995px) {
#recipie-selector-desktop {
display: none
}
#mobile-selector {
display: block
}
.mor img {
width: 40%
}
#ecomm-format img {
width: 200px;
height: 225px
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="recipie-desktop">
<div class="container-fluid">
<div class="border-box">
<div class="recipie-headline"> Four Awesome Cookie Mixes </div>
<hr>
<div class="spacer-c"></div>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-sfcatc-tab" data-toggle="pill" href="#v-pills-sfcatc" role="tab" aria-controls="v-pills-sfcatc-tab" aria-selected="true">Santa's Favorite Cookies</a>
<a class="nav-link" id="v-pills-wsc-tab" data-toggle="pill" href="#v-pills-wsc" role="tab" aria-controls="v-pills-wsc-tab" aria-selected="false">Wintry Sugar Cookies</a>
<a class="nav-link" id="v-pills-rc-tab" data-toggle="pill" href="#v-pills-rc" role="tab" aria-controls="v-pills-rc-tab" aria-selected="false">Reindeer Cookies</a>
<a class="nav-link" id="v-pills-ccoc-tab" data-toggle="pill" href="#v-pills-ccoc" role="tab" aria-controls="v-pills-ccoc-tab" aria-selected="false">Chocolate Chip & Oatmeal Cookies</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-sfcatc" role="tabpanel" aria-labelledby="v-pills-sfcatc-tab">
<div hidden id="snipcart" data-api-key="NmM2YTU4NzUtZGUwZS00OTAwLWFiZTEtNDQ2ZmE5ZTQwMDEzNjM2ODY4NTk3OTAxMjYwMDA5"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.3/default/snipcart.js"></script>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-sfcatc-tab" data-toggle="tab" href="#nav-sfcatc" role="tab" aria-controls="nav-sfcatc-tab" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-sfcd-tab" data-toggle="tab" href="#nav-sfcd" role="tab" aria-controls="nav-sfcd-tab" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-sfcv-tab" data-toggle="tab" href="#nav-sfcv" role="tab" aria-controls="nav-sfcv-tab" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-sfcatc" role="tabpanel" aria-labelledby="nav-sfcatc-tab">
<div class="row">
<div class="col-5">
<div class="spacer-c"></div>
<div class="ecomm-format"><img src="sfcjar.png"></div>
</div>
<div class="col-4">
<div class="spacer-c"></div>
<div class="rep-product-Headline">Holiday M&M Cookie Mix in a decorative 16oz Jar</div>
<div class="rep-product-price">$11.99</div>
<div class="spacer-d"></div>
<div class="ecomm-format">
<button class="snipcart-add-item" data-item-id="Santa's Favorite Cookies" data-item-price="11.99" data-item-url="/product/Santas-favorite-cookie-jar" data-item-description="M&M Cookie Mix" data-item-image="sfcjar.png" data-item-name="Santa's Favorite M&M Cookie">Order Now</button></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcd" role="tabpanel" aria-labelledby="nav-sfcd-tab">
<div class="row">
<div class="col-4">
<br>
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>¾ cup( 1 and ½ sticks) unsalted butter,softened</li>
<li>1 large egg</li>
<li>½ tablespoon vanilla extract</li>
</ul>
</div>
<div class="col-6">
<br>
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 350 degrees F. </li>
<li>Beat butter, egg, and vanilla extract in large mixing bowl until blended. </li>
<li>Add mason jar mix and mix well. </li>
<li>Drop by rounded tablespoon onto parchment paper lined baking sheet. </li>
<li>Bake for 9 to 11 minutes or until lightly golden brown. </li>
<li>Cool on baking sheets for 2 minutes before moving to cooling rack. </li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-sfcv" role="tabpanel" aria-labelledby="nav-sfcv-tab">video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-wsc" role="tabpanel" aria-labelledby="v-pills-wsc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-wscatc-tab" data-toggle="tab" href="#nav-wscatc" role="tab" aria-controls="nav-wscatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-wscd-tab" data-toggle="tab" href="#nav-wscd" role="tab" aria-controls="nav-wscd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-wscv-tab" data-toggle="tab" href="#nav-wscv" role="tab" aria-controls="nav-wscv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show " id="nav-wscatc" role="tabpanel" aria-labelledby="nav-wscatc-tab">wsc atc</div>
<div class="tab-pane fade" id="nav-wscd" role="tabpanel" aria-labelledby="nav-wscd-tab">
<div class="row">
<div class="col-4">
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup unsalted butter(softened)</li>
<li>1 egg, room temperature</li>
<li>½ teaspoon vanilla extract</li>
<li>½ cup sour cream</li>
</ul>
</div>
<div class="col-6">
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Mix all ingredients together and roll out to ¼ inch thickness on lightly floured surface.</li>
<li>Chill dough for about an hour before using cookie cutters to shape. Add sprinkles if desired.</li>
<li>Bake at 350 degrees for 10 to 12 minutes(do not overbake)</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-wscv" role="tabpanel" aria-labelledby="nav-wscv-tab">Video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-rc" role="tabpanel" aria-labelledby="v-pills-rc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-rcatc-tab" data-toggle="tab" href="#nav-rcatc" role="tab" aria-controls="nav-rcatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-rcdir-tab" data-toggle="tab" href="#nav-rcdir" role="tab" aria-controls="nav-rcdir" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-rcvid-tab" data-toggle="tab" href="#nav-rcvid" role="tab" aria-controls="nav-rcvid" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-rc" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-rcatc" role="tabpanel" aria-labelledby="nav-rcatc-tab">ATC</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-rcdir-tab">
<div class="row">
<div class="col-4">
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>½ cup softened butter</li>
<li>1 egg </li>
<li>1 teaspoon vanilla</li>
</ul>
</div>
<div class="col-6">
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Dump jar in a large mixing bowl</li>
<li>add ½ cup softened butter</li>
<li>add 1 egg</li>
<li>add 1 teaspoon vanilla.</li>
<li>Mix well and drop onto a cookie sheet lined with parchment paper. </li>
<li>Bake at 375 degrees for 8 to 10 minutes</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-rcvid-tab">RC Video</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-ccoc" role="tabpanel" aria-labelledby="v-pills-ccoc-tab">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-ccocatc-tab" data-toggle="tab" href="#nav-ccocatc" role="tab" aria-controls="nav-ccocatc" aria-selected="true">About The Cookies</a>
<a class="nav-item nav-link" id="nav-ccocd-tab" data-toggle="tab" href="#nav-ccocd" role="tab" aria-controls="nav-ccocd" aria-selected="false">Directions</a>
<a class="nav-item nav-link" id="nav-ccocv-tab" data-toggle="tab" href="#nav-ccocv" role="tab" aria-controls="nav-ccocv" aria-selected="false">Video Directions</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-ccocatc" role="tabpanel" aria-labelledby="nav-ccocatc-tab">atc ccoc</div>
<div class="tab-pane fade" id="nav-ccocd" role="tabpanel" aria-labelledby="nav-ccocd-tab">
<div class="row">
<div class="col-4">
<div class="recipie-subheadline">What You Need To Have:</div>
<ul>
<li>1 egg, slightly beaten</li>
<li>1 teaspoon vanilla extract</li>
<li>1 stick butter, softened</li>
</ul>
</div>
<div class="col-6">
<div class="recipie-subheadline">Directions:</div>
<ul>
<li>Preheat oven to 375 degrees.</li>
<li>Empty jar contents into a large mixing bowl</li>
<li>Add the egg</li>,
<li>Add the vanilla</li>
<li> Add the butter and mix well</li>
<li>Drop by spoonfuls onto an ungreased cookie sheet about 2 inches apart</li>
<li>Bake for 8 to 10 minutes or until the edges are golden brown</li>
<li>Remove to a wire rack and let cool</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-ccocv" role="tabpanel" aria-labelledby="nav-ccocv-tab">ccoc v</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>推荐阅读
- sql - 努力从 BigQuery SQL 中的时间戳字段中提取特定月份的 DATE
- python - TypeError：'NoneType' 对象是不可调用的错误，使用 Selenium Python 在汤对象上调用 find_element？
- arrays - 数组初始化拼写
- c# - 反转字符串、数组
- python - 该变量在我的方法中设置为 false，一旦方法运行，它应该更改为 True。但它没有
- html - 对齐 div 是并排的？
- javascript - 来自浏览器的错误提示：有没有办法可以添加自己的标题？
- python - django.db.migrations.exceptions.InconsistentMigrationHistory：迁移在其依赖accounts.0001_initial之前应用在数据库'default'上
- javascript - cURL 连接的替代方案
- android - 在kotlin中使用合成或视图绑定代码时如何选择视图名称？