Невозможно расположить центрированный логотип, чтобы изменить положение вправо при развале - PullRequest
Новая
       14

Невозможно расположить центрированный логотип, чтобы изменить положение вправо при развале

0 голосов
/ 27 июня 2018

У меня проблемы с получением логотипа, чтобы он оставался в верхней правой части панели навигации при падении. Смотрите изображения для выпуска.

Свернутое содержимое

Навбар перед развалом

Код для просмотра: 

    <nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
    <div class="container">

    <!-- Collapse Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobileNav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible Content -->
    <div class="collapse navbar-collapse justify-content-md-center font-weight-bold" id="mobileNav">

        <!-- Links Left -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Internet</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Building Managers</a>
            </li>
        </ul>

        <!-- Navbar Brand -->
        <a id="logo" class="navbar-brand" href="index.html">
            <img class="hidden-sm-down" src="img/logoNav.png" alt="Lone Star Fiber"> 
        </a>

        <!-- Links Right -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Business Internet</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Developers</a>
            </li>
        </ul>
    </div>
</nav>

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Я думаю, что подход должен быть похож на: Bootstrap NavBar с выровненными влево, по центру или справа элементами

Используйте 2 отдельных nav-collapse с той же целью .mobile-nav. Используйте классы order-*, чтобы показать логотип перед мобильным меню справа ... 

<nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
    <div class="container">

        <!-- Collapse Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".mobile-nav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Collapsible Content -->
        <div class="collapse navbar-collapse justify-content-md-center font-weight-bold mobile-nav order-2">

            <!-- Links Left -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Internet</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Building Managers</a>
                </li>
            </ul>
            </div>
            <!-- Navbar Brand -->
            <a id="logo" class="navbar-brand order-1 order-md-2 text-center" href="index.html">
                <img class="" src="//placehold.it/130x30?text=Lone Star Fiber" alt="Lone Star Fiber">
            </a>
            <div class="collapse navbar-collapse justify-content-md-center font-weight-bold mobile-nav order-2">

            <!-- Links Right -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Business Internet</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Developers</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

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

0 голосов
/ 27 июня 2018

Используйте d-none d-md-block, чтобы скрыть изображение на экране размером см, и d-md-none d-sm-block, чтобы показать, что изображение не внутри свертки на экране размера см.

См. Скрипку: https://jsfiddle.net/khz5uv1r/25/

img{
  height:50px;
  width:50px;
}
  <nav class="navbar navbar-expand-md fixed-top navbar-light blue-grey lighten-5 mx-auto">
    <div class="container">

    <!-- Collapse Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobileNav" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <!-- Collapsible Content -->

          <div class="pic d-md-none d-sm-block">
        <a id="logo"  href="index.html">
            <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Lone Star Fiber"> 
        </a>
        </div>
    <nav class="collapse navbar-collapse justify-content-md-center font-weight-bold" id="mobileNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Internet</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Building Managers</a>
            </li>
        <li class="nav-item pic d-none d-md-block">
        <a id="logo"  href="index.html">
            <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Lone Star Fiber"> 
        </a>
        </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Business Internet</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Developers</a>
            </li>
        </ul>
    </div>
    </div>
</nav>
...