Bootstrap 4：关闭左右之间的差距右侧分割按钮下拉元素

时间：2017-09-05 21:25:07

标签： html css twitter-bootstrap twitter-bootstrap-4

我在Bootstrap 4.0 Beta项目中使用split button dropdown。我遇到了一个问题，我无法弄清楚如何缩小被分割的btn-group组件之间的差距。

enter image description here

我试图让btn-group的左边部分与右边部分连续

我已经尝试了各种迭代的边距，填充等等，但是我不能让它们与零空间连续。以下是我摆弄的CSS的一部分：

.btn-group > .dropdown-toggle {
  margin-left: 0;
  padding-left: 0;
}

以下是代码：

＆＃13;
＆＃13; 
  <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>
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

这是创造差距的代码：

.navbar .navbar-nav .nav-link {
    margin: 0 0.25em;
}

将其更改为：

.navbar .navbar-nav .nav-item {
    margin: 0 0.25em;
}

＆＃13;
＆＃13; 
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;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
/* Address Bar */

.address-bar {
  padding-top: 10px;
  padding-bottom: 10px;
}

.address-bar a {
  color: gray;
  font-size: 14px;
  font-weight: normal;
}

.address-bar a:hover {
  color: #b32017;
  font-weight: bold;
}

.address-bar .fa {
  font-size: 18px;
}

#front-page-specialties img {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* For reviews */

.reviewer img {
  height: 75px;
}

.reviewer p {
  text-align: center;
  font-weight: bold;
}

.review-summary p {
  text-align: left;
}

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}


/* 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;
}

.navbar .navbar-nav .nav-item {
  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;
  }
}
＆＃13; 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<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>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

默认情况下，bootstrap 4具有以下功能：

SS

因此，您需要重置margin

中的.nav-link 
.navbar .navbar-nav .nav-link {
  margin: 0 
}

<强> Snnipet

＆＃13;
＆＃13; 
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;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: relative;
}


/* Address Bar */

.address-bar {
  padding-top: 10px;
  padding-bottom: 10px;
}

.address-bar a {
  color: gray;
  font-size: 14px;
  font-weight: normal;
}

.address-bar a:hover {
  color: #b32017;
  font-weight: bold;
}

.address-bar .fa {
  font-size: 18px;
}

#front-page-specialties img {
  padding-top: 10px;
  padding-bottom: 10px;
}


/* For reviews */

.reviewer img {
  height: 75px;
}

.reviewer p {
  text-align: center;
  font-weight: bold;
}

.review-summary p {
  text-align: left;
}

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
}


/* 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;
  }
}

.navbar .navbar-nav .nav-link {
  margin: 0 !important /* !important only for DEMO */
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
＆＃13; 
<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>

<!-- 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">

<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>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container-fluid d-flex h-100">
  <div class="row justify-content-center align-self-center">
    <div class="jumbotron">
      <div class="container">
        <h1 class="display-3">Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-md-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>© Company 2017</p>
      </footer>
    </div>
    <!-- /container -->

  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题