1

Хочу разместить ссылку с правой стороны и в обычной и в мобильной версии, но при этом, чтобы эта ссылка была зафиксирована с правой стороны всегда: и на компьютере и на мобильном. Все как бы работает, подумал я, но есть одна проблема.

введите сюда описание изображения

Вот так выглядит Navbar в мобильной версии (именно сверху, на нижнее вертикальное меню не обращайте внимания). Видим, что справа ссылка размещена. Теперь нажимаю кнопку раскрытия меню с остальными ссылками:

введите сюда описание изображения

Как видите, проблема в том, размещенная мною ссылка справа тоже выпадает, да и вообще, словно вся эта часть navbar'а сползает вниз, судя по тому, что даже navbar-brand сместился. Код выглядит так:

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-light navbar-expand-sm bg-light border-bottom">
    <button class="d-md-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a href="#" class="navbar-brand mx-md-0 mx-sm-auto">Laravel</a>

    <div class="collapse navbar-collapse" id="navbar-content">
        <ul class="navbar-nav navbar-left">
            <li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
        </ul>
    </div>

    <ul class="navbar-nav navbar-right">
        <li class="nav-item">
            <a href="#" class="nav-link">Item</a>
        </li>
    </ul>
</nav>

Пробовал поменять местами div с коллапсом и ul со ссылкой справа - тогда в мобильной версии все как я и хочу, а в обычной ссылка получается не справа, а слева, сразу после brand. Что делаю не так?

4
  • Какую именно ссылку? где она должна стоять? что не получается? слова "эта ссылка", не дают понятия. что именно вы хотите сделать?
    – kizoso
    21 авг 2018 в 10:37
  • Справа только одна ссылка с именем "Item", разве не видно?
    – Kaido Ren
    21 авг 2018 в 10:44
  • и что с ней нужно сделать?
    – kizoso
    21 авг 2018 в 10:44
  • Нужно, чтобы она всегда была справа, даже на маленьких дисплеях. Проблема в том, что при раскрытии меню (в маленьких дисплеях) эта ссылка тоже уходит вниз. Посмотрите на скрины. На втором скрине видно, что происходит при раскрытии меню
    – Kaido Ren
    21 авг 2018 в 10:54

1 ответ 1

2

Поместите выпадающее меню в конец блока. Меню не спозиционированно абсолютно, и поэтому смещает вашу ссылку:

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-light navbar-expand-sm bg-light border-bottom">
  <button class="d-md-none navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

  <a href="#" class="navbar-brand mx-md-0 mx-sm-auto">Laravel</a>

  <ul class="navbar-nav navbar-right order-md-3">
    <li class="nav-item">
      <a href="#" class="nav-link">Item</a>
    </li>
  </ul>

  <div class="collapse navbar-collapse" id="navbar-content">
    <ul class="navbar-nav navbar-left">
      <li class="nav-item"><a href="#" class="nav-link">Item 1</a></li>
    </ul>
  </div>
</nav>

4
  • Я в конце своего вопроса написал: "Пробовал поменять местами div с коллапсом и ul со ссылкой справа - тогда в мобильной версии все как я и хочу, а в обычной ссылка получается не справа, а слева, сразу после brand. " Собсна, так у меня и получилось, как вы предлагаете (я про код), но на диспелях побольше ссылка не справа находится, а сразу после brand
    – Kaido Ren
    21 авг 2018 в 11:06
  • 1
    добавьте к ul .order-md-3
    – kizoso
    21 авг 2018 в 11:13
  • 1
    а ну, sm-, lg- можете прописать еще
    – kizoso
    21 авг 2018 в 11:15
  • 1
    Воо. То, что нужно. Спасибо большое! :)
    – Kaido Ren
    21 авг 2018 в 11:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.