Bootstrap 4 HTML Navbar Иконка Текст - PullRequest
Новая
       87

Bootstrap 4 HTML Navbar Иконка Текст

0 голосов
/ 09 мая 2018

Ребята, я пытаюсь разобраться с навигационной панелью, и я не могу всю жизнь работать над этим

Я использую следующий код для создания панели навигации 

<!-- Fixed navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle navbar-toggler-right custom-toggler" style="color: rgb(255, 255, 255); align-self: auto;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    Menu<span class="navbar-toggler-icon"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Barr Custom Printing</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

  <ul class="nav navbar-nav navbar-right">

      <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false">Garments <span class="caret"></span></a>         
    <ul class="dropdown-menu">
      <li><a href="tshirt.html">T-Shirt</a></li>
      <li><a href="sweatshirt.html">Sweatshirt</a></li>
      <li><a href="polo.html">Polo Shirt</a></li>
      <li><a href="hoodies.html">Hoodies</a></li>
      <li><a href="vest.html">Sports Vests</a></li>
      <li><a href="oversize.html">Oversize</a></li>
      <li><a href="organic.html">Organic</a></li>
      <li><a href="sublimation.html">Sublimation</a></li>


    </ul>
    </li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="contactus.html">Contact Us</a></li>
    </ul>

     </div><!-- /.navbar-collapse -->
     </div><!-- /.container-fluid -->
     </nav>

Это приводит к следующему изображению слева menus

Любая идея, как я выгляжу как справа

Я пробовал копаться в CSS, но просто не знаю, что попробовать

Любая помощь оценена

Mark

1 Ответ

0 голосов
/ 09 мая 2018

Итак, вот оно. Я использовал flexbox для выравнивания элементов.

просто добавьте следующий html 

<!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle navbar-toggler-right custom-toggler" style="color: rgb(255, 255, 255); align-self: auto;" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  <span class="text">Menu</span>
  <div class="iconWrapper">
    <span class="navbar-toggler-icon">     </span>

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>

  </button>
  <a class="navbar-brand" href="#">Barr Custom Printing</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->

и следующий css: - 

.custom-toggler {
  display: flex;
  align-items: center;
}

.text {
  margin-right: 10px;
}

Живой пример: -

https://jsfiddle.net/DTcHh/67566/

...