I'm using a split button dropdown in a Bootstrap 4.0 Beta project. I've encountered an issue where I can't figure out how to close the gap between the components of the btn-groups that are split.
I'm trying to get the left portion of the btn-group to be contiguous with the right portion's
I've tried various iterations of mucking with margins, padding, etc., but I can't get them to be contiguous with zero space. Here's the part of the CSS I've fiddled with:
.btn-group > .dropdown-toggle {
margin-left: 0;
padding-left: 0;
}
Here's the code:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>body {
padding-top: 66px
}
html, body {
height: 100%;
}
/* use this to delinenate colors for sections
This is not a "factory" class for Bootstrap */
.section {
height: 100%;
}
h1, h2, h3, h4, thead {
/* For browsers that do not support gradients */
color: #b32017;
/* Gradient Code */
background: -webkit-linear-gradient(#b32017, #801710);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Shadow code */
-webkit-filter: drop-shadow(5px 5px 5px #d3d3d3);
filter: drop-shadow(5px 5px 5px #d3d3d3);
}
nav img {
-webkit-filter: none;
filter: none;
}
img {
-webkit-filter: drop-shadow(5px 5px 5px #d3d3d3);
filter: drop-shadow(5px 5px 5px #d3d3d3);
}
a {
color: #b32017;
}
a:hover {
color: #b32017;
}
/* Google Map */
.map-responsive {
overflow: hidden;
position: relative;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
/* CSS menu */
.navbar img {
max-height: 45px;
/*padding: 5px;*/
padding-left: 5sublpx;
padding-right: 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+14,e5e5e5+91,e5e5e5+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 14%, #e5e5e5 91%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 14%,#e5e5e5 91%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 14%,#e5e5e5 91%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.navbar {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+14,e5e5e5+91,e5e5e5+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 14%, #e5e5e5 91%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 14%,#e5e5e5 91%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 14%,#e5e5e5 91%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.navbar.btn-secondary {
/* For browsers that do not support gradients */
background-color: #b32017;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#b32017, #801710);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#b32017, #801710);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#b32017, #801710);
/* Standard syntax */
background: linear-gradient(#b32017, #801710);
}
.navbar .btn-secondary, p a.btn {
/*background-color: #b32017;*/
/* For browsers that do not support gradients */
background-color: #b32017;
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(#b32017, #801710);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(#b32017, #801710);
/* For Firefox 3.6 to 15 */
background: -moz-linear-gradient(#b32017, #801710);
/* Standard syntax */
background: linear-gradient(#b32017, #801710);
}
.navbar .btn {
/* Removes Bootstrap's border */
border: 0px;
}
.btn-group > .dropdown-toggle {
margin-left: 0;
padding-left: 0;
}
.navbar .navbar-brand {
color: #ffffff;
}
.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
color: #c1c1c1;
}
.navbar .navbar-text {
color: #ffffff;
}
.navbar .navbar-nav .nav-link {
color: #ffffff;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #c1c1c1;
}
.navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #c1c1c1;
background-color: #801710;
}
.navbar .navbar-toggle {
border-color: #801710;
}
.navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus {
background-color: #801710;
}
.navbar .navbar-toggle .navbar-toggler-icon {
color: #ffffff;
}
.navbar .navbar-collapse, .navbar .navbar-form {
border-color: #ffffff;
}
.navbar .navbar-link {
color: #ffffff;
}
.navbar .navbar-link:hover {
color: #c1c1c1;
}
/* This is used to resolve Bootstrap error where button doesn't expand all the way across */
.btn-group, .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
/*width: 100%;*/
}
/* This is used to resolve Bootstrap error where button doesn't expand all the way across */
.navbar-nav .dropdown-menu {
position: absolute !important;
}
.dropdown-toggle {
min-width: 25px;
}
.btn-group > .btn-secondary {
}
@media (max-width: 767px) {
.navbar .navbar-nav .open .dropdown-menu .dropdown-item .dropdown-menu.show {
/* no gradient support */
/* #cccccc */
color: #ffffff;
}
.navbar .navbar-nav .open .dropdown-menu .dropdown-item:hover, .navbar .navbar-nav .open .dropdown-menu .dropdown-item:focus {
color: #c1c1c1;
}
.navbar .navbar-nav .open .dropdown-menu .dropdown-item.active {
color: #c1c1c1;
background-color: #801710;
}
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
bottom: 3rem;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 32rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Experimental Test Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Style Sheet -->
<link rel="stylesheet" href="css/styles.css">
<!-- <link rel="stylesheet" href="css/lavish.css"> -->
</head>
<body>
<header>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-sm bg-faded navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<!-- -->
</span>
</button>
<!-- Brand -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="" class="rounded" alt="">
</a>
</div>
<!-- Working code -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav nav-pills nav-justified">
<!-- Home -->
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button"><i class="fa fa-fw fa-home"><!-- --></i></a>
</li>
<!-- Hours & Location-->
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button"><i class="fa fa-fw fa-map-marker"><!-- --></i> <i class="fa fa-clock-o" aria-hidden="true"></i></a>
</li>
<!-- Section -->
<li class="nav-item">
<div class="btn-group" role="button">
<a href="#" class="btn btn-secondary nav-link" role="button">Section</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split nav-link" data-toggle="dropdown">
<!-- -->
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
</div>
</div>
</li>
<!-- Section -->
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
</li>
<!-- Section -->
<li class="nav-item">
<div class="btn-group">
<a href="#" class="btn btn-secondary nav-link" role="button">Section</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split nav-link" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
</div>
</div>
</li>
<!-- Section -->
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
</li>
<!-- Section -->
<li class="nav-item">
<a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
</li>
<!-- Section -->
<li class="nav-item">
<div class="btn-group" role="button">
<a href="#" class="btn btn-secondary nav-link" role="button">Section</a>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split nav-link" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
<a class="dropdown-item" href="#">Sub-section</a>
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Sub-section</a>
<div class="dropdown-header">Dropdown Header</div>
<a class="dropdown-item" href="#">Sub-section</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
</div>
</body>
</html>
This is the code that creates the gap:
Change it to: