Не могу заставить начальной загрузки 4 кнопки навигационной панели выглядеть правильно, когда свернуто

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

Попробуйте это:

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

Существуют конкретные способы применения стилей к элементам Bootstrap, используя их классы и прочее, но вы всегда можете создать файл css с именами классов и стилизовать их оттуда, если захотите.Это не правильный способ, есть несколько способов, которые вы должны попробовать, которые более правильны, но это работает.

Answer 3

Простое решение состоит в добавлении класса flex-row (flex-direction: row) ко 2-му 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