Question

当我在切换器上单击以调整窗口大小以模仿移动平台时，登录按钮会变得太大。请在这里查看我的代码：

https://www.codeply.com/go/QKPKIbiiFo

这是两种不同显示的屏幕截图：

手机：https://gyazo.com/45475835b199968e82ae3410aa2b0b93

桌面：https://gyazo.com/0a507997dc7ad5edc81a4510a0f6638a

如何使按钮保持相同大小？

<nav class="navbar navbar-expand-xl fixed-top" style="background-color: black">
      <a href="#" class="navbar-brand"><img src="logo.png" width="300" height="60"></a>
      <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
      aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <li><a class="nav-item nav-link" href="#">Features</a></li>
          <li><a class="nav-item nav-link" href="#">Leaderboard</a></li>
          <li><a class="nav-item nav-link" href="#">Contact</a></li>
        </div>
        <div class="navbar-nav ml-auto">
          <li><a class="nav-item nav-link" href="#">Log In</a></li>
          <button type="button" class="btn btn-success">Sign Up</button>
        </div>
      </div>
    </nav>

@import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

li, a {
  font-family: "Montserrat", sans-serif;
  color: #edf0f1;
  text-decoration: none;
}

.navbar {
  padding-left: 15%;
  padding-right: 15%
}

Answer 1

在您的CSS代码中添加此代码：

.navbar-nav > button {
    width: fit-content;
}

这使按钮具有容纳其内容的大小。

Answer 2

如果希望它在移动设备上保持与桌面相同的大小，则可以找出它在桌面上呈现的大小（使用元素检查器）。宽度似乎不足72像素

获取您满意的宽度并将其分配为按钮的width属性。

.navbar-nav > .btn {
     width:72px;
}

Answer 3

您的HTML遇到了一些问题。 <li>不应嵌套在<div>中。如果您通过将列表项包装在<ul>中来解决此问题，然后将按钮从<ul>中拉出，则应该会获得预期的行为。修改后的HTML如下：

<nav class="navbar navbar-expand-xl fixed-top" style="background-color: black"><a href="#" class="navbar-brand"><img src="logo.png" width="300" height="60"></a>
  <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
  aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
      <li><a class="nav-item nav-link" href="#">Features</a></li>
      <li><a class="nav-item nav-link" href="#">Leaderboard</a></li>
      <li><a class="nav-item nav-link" href="#">Contact</a></li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li><a class="nav-item nav-link" href="#">Log In</a></li>
    </ul>
    <button type="button" class="btn btn-success">Sign Up</button>
  </div>
</nav>

Bootstrap导航栏折叠按钮太大

3 个答案: