Bootstrap 4下拉列表悬停出现
据我了解，默认情况下，点击时会出现引导程序4中的下拉菜单。但是，如果没有我使用任何其他CSS或JS，悬停就会显示我的菜单。这给移动开发带来了很大的问题。我可以创建一个Jquery解决方案，但不能确定对此有一个Bootstrap 4等效修复程序？
这里是我的一个下拉菜单的摘录。
<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
<div class="container h-100 pl-0 pr-0">
<div class="collapse navbar-collapse h-100" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mx-auto h-100 center-nav-mobile paddingTopAndBottom">
<li class="d-md-none text-white h6">Browse Product Categories</li>
@*//FLAT ROOFING*@
<li class="nav-item dropdown px-2 arrowDown">
<a class="nav-link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Flat Roofing
</a>
<div class="dropdown-menu p-0 justify-content-center border border-primary row mx-auto rounded" aria-labelledby="flatRoofingDropdown">
<div class="container">
<div class="row">
<div class="col-md-3 bg-grey mt-0 pl-0 pr-0 border-bottom">
@*//only show on screens above medium*@
<div class="colorme nav flex-column nav-pills d-none d-md-block" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="dropdown-item dropdownlinks active pl-2 dropdown-toggle font-weight-bold" id="v-pills-rubberRoofing-tab" data-toggle="pill" href="#v-pills-rubberRoofing" role="tab" aria-controls="v-pills-rubberRoofing" aria-selected="true">EPDM Rubber Roofing</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-fibre-tab" data-toggle="pill" href="#v-pills-fibre" role="tab" aria-controls="v-pills-fibre" aria-selected="false">Fibreglass GRP</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-roofingFelt-tab" data-toggle="pill" href="#v-pills-roofingFelt" role="tab" aria-controls="v-pills-roofingFelt" aria-selected="false">Roofing Felt</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-greenRoof-tab" data-toggle="pill" href="#v-pills-greenRoof" role="tab" aria-controls="v-pills-greenRoof" aria-selected="false">Green Roof System</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-liquid-tab" data-toggle="pill" href="#v-pills-liquid" role="tab" aria-controls="v-pills-liquid" aria-selected="false">Liquid Waterproofing</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-skylights-tab" data-toggle="pill" href="#v-pills-skylights" role="tab" aria-controls="v-pills-skylights" aria-selected="false">Skylights</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-flatRoof-tab" data-toggle="pill" href="#v-pills-flatRoof" role="tab" aria-controls="v-pills-flatRoof" aria-selected="false">Flat Roof Outlets</a>
</div>
@*//only show on screens below medium*@
<div id="accordion" class="d-md-none">
<div class="card">
<div class="card-header p-0" id="headingrubberRoofing">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#rubberRoofing" aria-expanded="true" aria-controls="rubberRoofing">
EPDM Rubber Roofing
</button>
</h5>
</div>
<div id="rubberRoofing" class="collapse" aria-labelledby="headingrubberRoofing" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/duoply">Duoply</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingfibreglass">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#fibreglass" aria-expanded="false" aria-controls="fibreglass">
Fibreglass GRP
</button>
</h5>
</div>
<div id="fibreglass" class="collapse" aria-labelledby="headingfibreglass" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/ultraflex">Ultraflex</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingroofingfelt">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#roofingfelt" aria-expanded="false" aria-controls="roofingfelt">
Roofing Felt
</button>
</h5>
</div>
<div id="roofingfelt" class="collapse" aria-labelledby="headingroofingfelt" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/osb">OSB</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headinggreenroof">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#greenroof" aria-expanded="false" aria-controls="greenroof">
Green Roof System
</button>
</h5>
</div>
<div id="greenroof" class="collapse" aria-labelledby="headinggreenroof" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingliquidwaterproof">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#liquidwaterproof" aria-expanded="false" aria-controls="liquidwaterproof">
Liquid Waterproofing
</button>
</h5>
</div>
<div id="liquidwaterproof" class="collapse" aria-labelledby="headingliquidwaterproof" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Liquid Rubber</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingskylights">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#skylights" aria-expanded="false" aria-controls="skylights">
Skylights
</button>
</h5>
</div>
<div id="skylights" class="collapse" aria-labelledby="headingskylights" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Domes</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingflatroof">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#flatroof" aria-expanded="false" aria-controls="flatroof">
Flat Roof Outlets
</button>
</h5>
</div>
<div id="flatroof" class="collapse" aria-labelledby="headingflatroof" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mt-0 pl-2 pr-0 d-none d-md-block">
@*//only show on screens above medium *@
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-rubberRoofing" role="tabpanel" aria-labelledby="v-pills-rubberRoofing-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/duoply">Duoply</a>
</div>
<div class="tab-pane fade" id="v-pills-fibre" role="tabpanel" aria-labelledby="v-pills-fibre-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/ultraflex">Ultraflex</a>
</div>
<div class="tab-pane fade" id="v-pills-roofingFelt" role="tabpanel" aria-labelledby="v-pills-roofingFelt-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/osb">OSB</a>
</div>
<div class="tab-pane fade" id="v-pills-greenRoof" role="tabpanel" aria-labelledby="v-pills-greenRoof-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
</div>
<div class="tab-pane fade" id="v-pills-liquid" role="tabpanel" aria-labelledby="v-pills-liquid-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Liquid Rubber</a>
</div>
<div class="tab-pane fade" id="v-pills-skylights" role="tabpanel" aria-labelledby="v-pills-skylights-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Domes</a>
</div>
<div class="tab-pane fade" id="v-pills-flatRoof" role="tabpanel" aria-labelledby="v-pills-flatRoof-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
</div>
</div>
<div class="col-md-5 border-left">
<div class="py-2">
<div class="advice">
<p><span class="fa fa-question-circle fa-fw"></span>Expert Advice</p>
<ul>
<li><a href="/blog/what-do-roofers-need-to-know-about-sedum-roofs">What Do Roofers Need To Know About Green Roofs?</a></li>
<li><a href="/blog/tell-me-more-about-epdm-rubber-roofing">Tell Me More About...Rubber Roofing</a></li>
<li><a href="/blog/benefits-torch-on-roofing-felt">Why You Should Consider Torch-On Felt</a></li>
<li><a href="/blog/why-choose-a-grp-flat-roof">Why Choose A GRP Flat Roof?</a></li>
</ul>
</div>
</div>
<a href="/Static/RoofingCalculators">
<img class="img-fluid py-2" data-src="/Content/images/promo/menu/flat-roofing/Flat_Roof_Calculators.png" src="~/Content/images/promo/menu/flat-roofing/Flat_Roof_Calculators.png" alt="Flat Roof Calculators">
</a>
<a href="/category/flexitec-2020">
<img class="img-fluid py-2" data-src="/Content/images/promo/menu/flat-roofing/Flexitec_2020.png" src="~/Content/images/promo/menu/flat-roofing/Flexitec_2020.png" alt="Flexitec 2020">
</a>
</div>
</div>
</div>
</div>
</li>
navbar-expand-md类使它在默认情况下在中型和大型上显示为展开。它不应该在越来越小的负载上扩展。
检查
https://getbootstrap/docs/4.0/layout/grid/
和
https://getbootstrap/docs/4.0/components/navbar/
Bootstrap 4下拉列表悬停出现
据我了解，默认情况下，点击时会出现引导程序4中的下拉菜单。但是，如果没有我使用任何其他CSS或JS，悬停就会显示我的菜单。这给移动开发带来了很大的问题。我可以创建一个Jquery解决方案，但不能确定对此有一个Bootstrap 4等效修复程序？
这里是我的一个下拉菜单的摘录。
<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
<div class="container h-100 pl-0 pr-0">
<div class="collapse navbar-collapse h-100" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mx-auto h-100 center-nav-mobile paddingTopAndBottom">
<li class="d-md-none text-white h6">Browse Product Categories</li>
@*//FLAT ROOFING*@
<li class="nav-item dropdown px-2 arrowDown">
<a class="nav-link dropdown-toggle text-white paddingRightButton h-100 noPaddingRightLeft" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Flat Roofing
</a>
<div class="dropdown-menu p-0 justify-content-center border border-primary row mx-auto rounded" aria-labelledby="flatRoofingDropdown">
<div class="container">
<div class="row">
<div class="col-md-3 bg-grey mt-0 pl-0 pr-0 border-bottom">
@*//only show on screens above medium*@
<div class="colorme nav flex-column nav-pills d-none d-md-block" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="dropdown-item dropdownlinks active pl-2 dropdown-toggle font-weight-bold" id="v-pills-rubberRoofing-tab" data-toggle="pill" href="#v-pills-rubberRoofing" role="tab" aria-controls="v-pills-rubberRoofing" aria-selected="true">EPDM Rubber Roofing</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-fibre-tab" data-toggle="pill" href="#v-pills-fibre" role="tab" aria-controls="v-pills-fibre" aria-selected="false">Fibreglass GRP</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-roofingFelt-tab" data-toggle="pill" href="#v-pills-roofingFelt" role="tab" aria-controls="v-pills-roofingFelt" aria-selected="false">Roofing Felt</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-greenRoof-tab" data-toggle="pill" href="#v-pills-greenRoof" role="tab" aria-controls="v-pills-greenRoof" aria-selected="false">Green Roof System</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-liquid-tab" data-toggle="pill" href="#v-pills-liquid" role="tab" aria-controls="v-pills-liquid" aria-selected="false">Liquid Waterproofing</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-skylights-tab" data-toggle="pill" href="#v-pills-skylights" role="tab" aria-controls="v-pills-skylights" aria-selected="false">Skylights</a>
<a class="dropdown-item dropdownlinks pl-2 dropdown-toggle font-weight-bold" id="v-pills-flatRoof-tab" data-toggle="pill" href="#v-pills-flatRoof" role="tab" aria-controls="v-pills-flatRoof" aria-selected="false">Flat Roof Outlets</a>
</div>
@*//only show on screens below medium*@
<div id="accordion" class="d-md-none">
<div class="card">
<div class="card-header p-0" id="headingrubberRoofing">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#rubberRoofing" aria-expanded="true" aria-controls="rubberRoofing">
EPDM Rubber Roofing
</button>
</h5>
</div>
<div id="rubberRoofing" class="collapse" aria-labelledby="headingrubberRoofing" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/duoply">Duoply</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingfibreglass">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#fibreglass" aria-expanded="false" aria-controls="fibreglass">
Fibreglass GRP
</button>
</h5>
</div>
<div id="fibreglass" class="collapse" aria-labelledby="headingfibreglass" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/ultraflex">Ultraflex</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingroofingfelt">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#roofingfelt" aria-expanded="false" aria-controls="roofingfelt">
Roofing Felt
</button>
</h5>
</div>
<div id="roofingfelt" class="collapse" aria-labelledby="headingroofingfelt" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/osb">OSB</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headinggreenroof">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#greenroof" aria-expanded="false" aria-controls="greenroof">
Green Roof System
</button>
</h5>
</div>
<div id="greenroof" class="collapse" aria-labelledby="headinggreenroof" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingliquidwaterproof">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#liquidwaterproof" aria-expanded="false" aria-controls="liquidwaterproof">
Liquid Waterproofing
</button>
</h5>
</div>
<div id="liquidwaterproof" class="collapse" aria-labelledby="headingliquidwaterproof" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Liquid Rubber</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingskylights">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#skylights" aria-expanded="false" aria-controls="skylights">
Skylights
</button>
</h5>
</div>
<div id="skylights" class="collapse" aria-labelledby="headingskylights" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Domes</a>
</div>
</div>
</div>
<div class="card">
<div class="card-header p-0" id="headingflatroof">
<h5 class="mb-0 acordionHeaderLinks">
<button class="btn buttonArrow btn-link collapsed w-100 text-left rounded-0 text-dark text-decoration-none font-weight-bold" data-toggle="collapse" data-target="#flatroof" aria-expanded="false" aria-controls="flatroof">
Flat Roof Outlets
</button>
</h5>
</div>
<div id="flatroof" class="collapse" aria-labelledby="headingflatroof" data-parent="#accordion">
<div class="card-body p-2 pl-3 text-left">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mt-0 pl-2 pr-0 d-none d-md-block">
@*//only show on screens above medium *@
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-rubberRoofing" role="tabpanel" aria-labelledby="v-pills-rubberRoofing-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/duoply">Duoply</a>
</div>
<div class="tab-pane fade" id="v-pills-fibre" role="tabpanel" aria-labelledby="v-pills-fibre-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/ultraflex">Ultraflex</a>
</div>
<div class="tab-pane fade" id="v-pills-roofingFelt" role="tabpanel" aria-labelledby="v-pills-roofingFelt-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/osb">OSB</a>
</div>
<div class="tab-pane fade" id="v-pills-greenRoof" role="tabpanel" aria-labelledby="v-pills-greenRoof-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
</div>
<div class="tab-pane fade" id="v-pills-liquid" role="tabpanel" aria-labelledby="v-pills-liquid-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/tools/flexitec-calculator">Liquid Rubber</a>
</div>
<div class="tab-pane fade" id="v-pills-skylights" role="tabpanel" aria-labelledby="v-pills-skylights-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="#">Domes</a>
</div>
<div class="tab-pane fade" id="v-pills-flatRoof" role="tabpanel" aria-labelledby="v-pills-flatRoof-tab">
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item dropdownsubmenulinks pl-2" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
</div>
</div>
<div class="col-md-5 border-left">
<div class="py-2">
<div class="advice">
<p><span class="fa fa-question-circle fa-fw"></span>Expert Advice</p>
<ul>
<li><a href="/blog/what-do-roofers-need-to-know-about-sedum-roofs">What Do Roofers Need To Know About Green Roofs?</a></li>
<li><a href="/blog/tell-me-more-about-epdm-rubber-roofing">Tell Me More About...Rubber Roofing</a></li>
<li><a href="/blog/benefits-torch-on-roofing-felt">Why You Should Consider Torch-On Felt</a></li>
<li><a href="/blog/why-choose-a-grp-flat-roof">Why Choose A GRP Flat Roof?</a></li>
</ul>
</div>
</div>
<a href="/Static/RoofingCalculators">
<img class="img-fluid py-2" data-src="/Content/images/promo/menu/flat-roofing/Flat_Roof_Calculators.png" src="~/Content/images/promo/menu/flat-roofing/Flat_Roof_Calculators.png" alt="Flat Roof Calculators">
</a>
<a href="/category/flexitec-2020">
<img class="img-fluid py-2" data-src="/Content/images/promo/menu/flat-roofing/Flexitec_2020.png" src="~/Content/images/promo/menu/flat-roofing/Flexitec_2020.png" alt="Flexitec 2020">
</a>
</div>
</div>
</div>
</div>
</li>
navbar-expand-md类使它在默认情况下在中型和大型上显示为展开。它不应该在越来越小的负载上扩展。
检查
https://getbootstrap/docs/4.0/layout/grid/
和
https://getbootstrap/docs/4.0/components/navbar/
发布评论