Question

我有navbar混合了split dropdown buttons和常规按钮。在非折叠模式下显示时看起来很好，但是当折叠导航栏时，只有按钮会扩展到视口的全宽。

根据我在Bootstrap 4中看到的分割下拉按钮（它是btn-group）的属性检查器的内容，看起来常规按钮是w-100的成员，当它折叠时，但btn-group成员不是。只有在w-100折叠后，我才能将拆分下拉按钮配置为类navbar的成员？

// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})

.navbar, .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 {
  /*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 img {
  max-height: 40px;
}

.navbar .btn {
  /* Removes Bootstrap's border */
  border: 0px;
}

.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;
}

@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;
  }
}

<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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!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>
</head>

<body>
  <!-- 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 -->
    <a class="navbar-brand" href="#">
    </a>
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav w-100 nav-justified">
        <!-- Home -->
        <li class="nav-item">
          <div class="btn-group">
            <a href="#" class="btn btn-secondary" role="button"><i class="fa fa-fw fa-home"><!-- --></i> Home</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#"><i class="fa fa-fw fa-map-marker"><!-- --></i>Hours &amp; Location</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <div class="btn-group" role="button">
            <a href="#" class="btn btn-secondary" role="button">Section</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Item 1</a>
              <a class="dropdown-item" href="#">Item 2</a>
              <a class="dropdown-item" href="#">Item 3</a>
              <a class="dropdown-item" href="#">Item 4</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Another Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
        </li>
        <li class="nav-item">
          <div class="btn-group" role="button">
            <a href="#" class="btn btn-secondary" role="button">Products</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Item 1</a>
              <a class="dropdown-item" href="#">Item 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

`

Answer 1

如果我理解正确，您希望按钮填充100％宽度。

为了实现这一目标，您可以为width: 100%和.btn-group设置a.btn，如下所示：

.btn-group,
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { width: 100%; }

下拉菜单打开时还有一个问题。要解决此问题，您应该将position .navbar-nav .dropdown-menu从static覆盖为absolute：

.navbar-nav .dropdown-menu { position: absolute !important; }

要确保仅在navbar折叠时应用此样式，您可以使用Responsive breakpoints

// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})

.btn-group,
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { width: 100%; }
.navbar-nav .dropdown-menu { position: absolute !important; }

.navbar, .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 {
  /*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 img {
  max-height: 40px;
}

.navbar .btn {
  /* Removes Bootstrap's border */
  border: 0px;
}

.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;
}

@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;
  }
}

<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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!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>
</head>

<body>
  <!-- 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 -->
    <a class="navbar-brand" href="#">
    </a>
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav w-100 nav-justified">
        <!-- Home -->
        <li class="nav-item">
          <div class="btn-group">
            <a href="#" class="btn btn-secondary" role="button"><i class="fa fa-fw fa-home"><!-- --></i> Home</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#"><i class="fa fa-fw fa-map-marker"><!-- --></i>Hours &amp; Location</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <div class="btn-group" role="button">
            <a href="#" class="btn btn-secondary" role="button">Section</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Item 1</a>
              <a class="dropdown-item" href="#">Item 2</a>
              <a class="dropdown-item" href="#">Item 3</a>
              <a class="dropdown-item" href="#">Item 4</a>
            </div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Another Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
        </li>
        <li class="nav-item">
          <a class="nav-link btn btn-secondary" href="#" role="button">Section</a>
        </li>
        <li class="nav-item">
          <div class="btn-group" role="button">
            <a href="#" class="btn btn-secondary" role="button">Products</a>
            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Item 1</a>
              <a class="dropdown-item" href="#">Item 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

在显示和折叠

1 个答案: