From 16909a8760ecb88f6333aedef2fe181170679abb Mon Sep 17 00:00:00 2001 From: Jonathan Rochkind Date: Thu, 9 Sep 2021 16:22:26 -0400 Subject: [PATCH] Fix missing bottom border for bootstrap 4.6.0 In Bootstrap 4.6.0, as a result of https://github.com/twbs/bootstrap/pull/32211, the bottom border is not visible in the responsive-tab in small mode. This fixes it. --- dist/css/responsive-tabs.css | 27 ++++++++++++++------------- home.html | 22 +++++++++++----------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/dist/css/responsive-tabs.css b/dist/css/responsive-tabs.css index 78d283c..498fd31 100644 --- a/dist/css/responsive-tabs.css +++ b/dist/css/responsive-tabs.css @@ -4,31 +4,32 @@ @media (min-width: 768px) { .responsive-tabs .dropdown-arrow { - display: none; - } + display: none; + } } @media screen and (max-width: 767px) { .responsive-tabs { - position: relative; + position: relative; border: 1px solid #ccc; } .responsive-tabs li { - width: 100%; - margin: 0 !important; + width: 100%; + margin: 0 !important; } .responsive-tabs li > a { - display: none; - border: 0 !important; + display: none; + border: 0 !important; border-radius: 0 !important; + margin-bottom: 0 !important; } .responsive-tabs.open li > a, .responsive-tabs li > a.active { display: block; } - .responsive-tabs .dropdown-arrow { + .responsive-tabs .dropdown-arrow { position: absolute; top: 15px; - right: 15px; + right: 15px; border: solid black; border-width: 0 3px 3px 0; display: inline-block; @@ -37,10 +38,10 @@ transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all ease .5s; - cursor: pointer; + cursor: pointer; } .responsive-tabs.open .dropdown-arrow { transform: rotate(-135deg); - transition: all ease .5s; - } -} \ No newline at end of file + transition: all ease .5s; + } +} diff --git a/home.html b/home.html index 6a0dafe..6b8c62d 100644 --- a/home.html +++ b/home.html @@ -2,16 +2,16 @@ Bootstrap 4 Tabs Responsive - - - + + + - - + + - +

Bootstrap 4 Responsive Tabs (Dropdown) Demo

@@ -30,7 +30,7 @@

Bootstrap 4 Responsive Tabs (Dropdown)

First Panel

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Second Panel

@@ -40,20 +40,20 @@

Bootstrap 4 Responsive Tabs (Dropdown)

Third Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
+

- +