Не могу понять, как изменить navbar в начальной загрузке 4 - PullRequest
Новая
       8

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

0 голосов
/ 12 ноября 2018

Использование Bootstrap 4.

У меня есть этот HTML для navbar: 

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Home </a>
  <button class="navbar-toggler navbar-toggler-right" 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">
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2 my-sm-0" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    <button *ngIf="!isSignedIn" (click)="signIn()" class="btn btn-danger my-2 my-sm-0" type="submit">SignIn</button>
      <button *ngIf="isSignedIn" (click)="signOut()" class="btn btn-danger my-2 my-sm-0" type="submit">SignOut</button>
  </div>
</nav>

В свернутом состоянии это выглядит так:

enter image description here

Если я удаляю navbar-brand (Home), я получаю это:

enter image description here

Вопрос 1: почему-то «Развернуть» переместили в левую сторону

Когда я нажимаю, чтобы развернуть, я получаю это:

enter image description here

В полном режиме я получаю это:

enter image description here

То, что я хочу, это:

  1. Кнопка Expand (значок гамбургера) остается на правой стороне, даже когда я удаляю текст бренда navbar.
  2. Красная кнопка SignOut находится справа.
  3. Форма поиска с кнопкой поиска, чтобы остаться слева без текста navbar-brand (Home)
  4. И последнее - возможно ли сделать весь navbar немного тоньше, используя только начальную загрузку? Я знаю, что это можно сделать с помощью CSS.

Пожалуйста, сообщите. Спасибо!

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Используйте ml-auto (поле слева: авто), чтобы нажимать кнопки вправо ... 

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <button class="navbar-toggler ml-auto" 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">
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2 my-sm-0" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <button class="btn btn-danger my-2 my-sm-0 ml-auto" type="submit">SignOut</button>
    </div>
</nav>

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

См. Также: Bootstrap 4выровнять элементы навигационной панели вправо

0 голосов
/ 12 ноября 2018 

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <!-- You will need to add a non breaking space '&nbsp;' so when you remove the nav-band the hamburger icon holds in place-->
    <a class="navbar-brand" href="#">Home </a> &nbsp;

    <!-- Add mr-0 class to the hamburger icon to set its margin right to 0px-->
    <button class="navbar-toggler navbar-toggler-right mr-0" 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">
      <!-- Place the form in a navbar-nav class then ensure the form has a nav-item class-->
      <ul class="navbar-nav mr-auto">
        <form class="form-inline nav-item">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </ul>
      <!-- Add the 2 buttons in a nav-item -->
      <ul class="navbar-nav my-2 my-lg-0">
        <li class="nav-item ">
          <button *ngIf="!isSignedIn" (click)="signIn()" class="btn btn-danger mr-1" type="submit">SignIn</button>
        </li>
        <li class="nav-item pt-sm-1 pt-xs-1">
          <button *ngIf="isSignedIn" (click)="signOut()" class="btn btn-danger" type="submit">SignOut</button>
        </li>
      </ul>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Вот кодекс ответов 1, 2, 3. Не уверен, что вы можете получить вопрос 4 только при начальной загрузке.

Пожалуйста, отметьте Bootstrap Navbar , Интервал начальной загрузки и неразрывный пробел & nbsp

...