Question

有没有一种方法可以仅在导航栏上折叠时设置其样式，或在折叠时将其更改为文本，导致现在看起来正常，但是在折叠时，这些按钮位于彼此的正下方，并且不一样的宽度。这是我需要以某种方式设置样式或设置边距的最后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>

Answer 1

一个简单的解决方案是将flex-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

Answer 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>

Answer 3

有一些特定的方法可以使用Bootstrap元素的类和东西将样式应用于Bootstrap元素，但是您可以始终创建带有类名的css文件，并根据需要从那里对其进行样式化。这不是严格的方法，您应该尝试一堆比这更正确的方法，但是它可以工作。

收起时无法引导4个导航栏按钮看起来正确

3 个答案: