Лучший способ использовать Bootstrap 3 Navbar без отклика

Я пытаюсь создать простой Navbar в Bootstrap 3, который не сжимается - отзывчивость здесь не нужна, потому что у нас просто есть простой заголовок слева + кнопка справа.

Моя цель состоит в том, чтобы кнопки title + всегда отображались одинаково для всех разрешений. Что-то вроде этого:

<div class="navbar navbar-fixed-top">

    <form class="navbar-form navbar-right">
        <button class="btn btn-default">Button 1</button>
        <button class="btn btn-default">Button 2</button>
    </form>

    <a class="navbar-brand" href="#">Title Here</a>

</div>

Я пробовал множество комбинаций из документации. И этот пост описывает, как использовать новые классы .nav-header. Я попытался дублировать элементы внутри .nav-заголовка, а также попытался переопределить стили запросов медиафайлов BS3.

Существует ли более простой способ использования Navbar без сглаживания?

Ответы

Ответ 1

Лучшим способом, который я мог бы найти, является использование контейнеров 2 navbar-header, а затем используйте pull-left и pull-right, так как они не привязаны ни к каким отзывчивым медиа-запросам.

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title Here</a>
    </div>
    <div class="navbar-header pull-right">
      <button type="button" class="btn btn-default navbar-btn">Button 1</button>
      <button type="button" class="btn btn-default navbar-btn">Button 2</button>
    </div>
</div>

Демо на Bootply: http://bootply.com/74912

Ответ 2

В моем случае я использовал только navbar-header и ничего больше.

В принципе, заголовок navbar поможет мне легко получить весь заголовок css. Внутри этого я добавил контейнер и играл с моими вариантами для аналогичного случая, как ваш.

    <nav class="navbar navbar-default navbar-fixed-top" id="transient-header">
        <div class="container clearfix">
            <div class="transient-header-block clearfix">
                <h1 class="hide" href="/" style="color: #fff;">Primary</h1>
                <a class="navbar-brand" href="/">{{> svgs/logos/_white_symbol}}</a>
                <div class="pull-right price">
                    <a href="#" class="btn btn-white-border contact-modal" href="#contactModal">
                        {{> svgs/_white_rupee_icon}}
                        {{product.price}}
                    </a>
                </div>
            </div>
        </div>
    </nav>