折叠时无法让引导程序 4 导航栏按钮看起来正确答案

【问题标题】：Can't get bootstrap 4 navbar buttons to look right, when collapsed折叠时无法让引导程序 4 导航栏按钮看起来正确
【发布时间】：2019-06-20 23:54:57
【问题描述】：

有没有办法让我的导航栏中的按钮仅在折叠时设置样式，或者在折叠时将按钮更改为文本，因为现在它看起来正常，但是当折叠时，按钮被放置在彼此的正下方并且是宽度不一样。这是我需要以某种方式设置样式或设置边距的最后 2 个按钮和搜索栏。

我尝试查看 w3schools 上的引导文档和指南，但未能找到任何真正的解决方案。

抱歉，如果这不是正确的方法，或者我遗漏了什么，这是我的第一篇文章。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link active" href="/">Hjem</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="?page=new">Ny kunde</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link " href="?page=allcustomers">Vis alle kunder</a>
      </li> 
      <li class="nav-item">
        <a class="nav-link " href="?page=settings">Opsætning</a>
      </li>  
    </li>

    </ul>

    <ul class="navbar-nav">

        <li class="nav-item mr-sm-2">
        <a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
    </li>


    <li class="nav-item mr-sm-2">
        <form class="form-inline">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
                <div class="input-group-append">
                    <button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                </div>
            </div>
        </form>
    </li>
    <li class="nav-item">
        <a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
    </li> 
    </ul>

  </div>
  </div>
</nav>

【问题讨论】：

抱歉 - 只是缺少开始的
标记，现在添加。

标签： html bootstrap-4 navbar

【解决方案1】：

一个简单的解决方案是将flex-row (flex-direction: row) 类添加到第二个navbar-nav。这将允许按钮和表单始终在所有屏幕宽度的行中水平（内联）布局。

    <ul class="navbar-nav flex-row">
          <li class="nav-item mr-sm-2">
                  <a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
          </li>
          <li class="nav-item mr-sm-2">
                  <form class="form-inline">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
                            <div class="input-group-append">
                                <button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                            </div>
                        </div>
                  </form>
          </li>
          <li class="nav-item">
                  <a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
          </li>
    </ul>

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

【讨论】：

这是一个简单且非常有效的解决方案。效果很好，但不是 100% 在我的手机上按钮文本太大并导致文本换行，但我会通过在分辨率小于 1024 时用图标交换文本来解决这个问题。
或者使用text-truncate类：codeply.com/go/Wbc4kRGCtO
另一个我不知道的精彩课程。你也知道如何保持按钮之间的间距吗？当分辨率达到某个点时，它就会消失。
使用@media css 让它工作。感谢您的帮助:)

【解决方案2】：

试试这个：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link active" href="/">Hjem</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="?page=new">Ny kunde</a>
      </li>      
      <li class="nav-item">
        <a class="nav-link " href="?page=allcustomers">Vis alle kunder</a>
      </li> 
      <li class="nav-item">
        <a class="nav-link " href="?page=settings">Opsætning</a>
      </li>  
    </li>

    </ul>

    <ul class="navbar-nav">

        <li class="nav-item mr-sm-2">
        <a class="btn btn-secondary navbar-btn btn-block" href="?page=invoice">Quick faktura</a>
    </li>


    <li class="nav-item mr-sm-2">
        <form class="form-inline">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Søg" aria-label="Søg" name="search" aria-describedby="Søg">
                <div class="input-group-append">
                    <button class="btn btn-secondary navbar-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                </div>
            </div>
        </form>
    </li>
    <li class="nav-item">
        <a class="btn btn-danger navbar-btn btn-block" href="?page=logout">Log ud</a>
    </li> 
    </ul>

  </div>
  </div>
</nav>

【讨论】：

【解决方案3】：

有一些特定的方法可以使用它们的类和东西将样式应用到 Bootstrap 元素，但是如果你愿意的话，你总是可以用类名创建一个 css 文件并从那里对它们进行样式化。这不是正确的方法，您应该尝试很多比这更正确的方法，但它确实有效。

【讨论】：