Фиксированная верхняя панель навигации Bootstrap 3 RC2 состоит из двух строк

Я использую Bootstrap 3 RC2 и пытаюсь сделать панель навигации фиксированной сверху, но без полной ширины. Я скопировал объявления "navbar-fixed-top" в css и создал свой. В IE (10) это работает хорошо, но в Chrome (28) полоса занимает две строки.

Я что-то пропустил, чтобы содержимое навигационной панели всегда было в одной строке?

Спасибо.

Начальная загрузка: http://bootply.com/74981

CSS:

.navbar-custom {
    border-width: 0 0 1px;
    position: fixed;
    top: 0;
    right: 100px;
    z-index: 1030;
}

    .navbar-custom .navbar-form {
        padding-right: 0;
    }

.navbar-custom {
    border-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

HTML:

<nav class="navbar navbar-inverse navbar-custom" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-target=".navbar-ex1-collapse" data-toggle="collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a title="Accueil" class="navbar-brand" href="/">
            Flammy
        </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">News</a></li>
            <li><a href="#">Events</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown">Games <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Game 1</a></li>
                    <li><a href="#">Game 2</a></li>
                    <li><a href="#">Game 3</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown">Projects <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Big project 1</a></li>
                    <li><a href="#">Big project 2</a></li>
                    <li><a href="#">Big project 3</a></li>
                </ul>
            </li>
            <li><a href="#">Forums</a></li>
        </ul>
        <form class="navbar-form navbar-right" action="/Account/Logout" method="post">    <div class="btn-group">
        <a class="btn btn-default" href="#">Register</a>
        <a class="btn btn-default" href="#">Login</a>
    <div class="btn-group">
        <button title="Language" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <i class="glyphicon glyphicon-flag"></i>
        </button>
        <ul class="dropdown-menu pull-right">
                <li><a href="#">Language</a></li>
                <li><a href="#">Language</a></li>
                <li><a href="#">Language</a></li>
        </ul>
    </div>
</div>
</form>

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

person Dede    schedule 18.08.2013    source источник


Ответы (1)


Проблема заключается в методах плавающего макета Bootstrap и в том факте, что у вас нет явно заданной ширины для вашей панели навигации, поэтому вы можете попробовать установить min-width, который подходит для всего вашего контента, или добавить это исправление в свой CSS:

.navbar-custom .navbar-collapse {
    float:left;
}

Обновленный загрузчик http://bootply.com/74987#

person Omar    schedule 18.08.2013
comment
Это отлично работает в Chrome; но в Firefox это выглядит так: i.imgur.com/wOiHxDt.png - person Sheharyar; 07.12.2013