如何在不破坏的情况下显示超小型导航栏？

Question

我需要对下面的“超小”导航变体做些什么，以便它只是连续显示而不是堆叠？

较大的屏幕看起来很好：

             

        <div class="navbar-collapse visible-sm-block visible-md-block visible-lg-block">
            <div class="navbar-text">{$company->company_name} - Kundenportal2</div>
            <div class="navbar-text">{ $user->title } { $user->givenname } { $user->surname }</a></div>

            <a class="navbar-brand navbar-right" href="#">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </a>

            <a class="navbar-brand navbar-right" href="#">
                <span class="glyphicon glyphicon-cog"></span>
            </a>
        </div>

        <div class="navbar-collapse visible-xs-block">
            <div class="navbar-text">nn</div>
            <div class="navbar-text">22</div>
            <a class="navbar-text navbar-left" href="#">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </a>

            <a class="navbar-brand navbar-right" href="#">
                <span class="glyphicon glyphicon-cog"></span>
            </a>
        </div>

    </div>
</div>

Answer 1

我认为您正在寻找类似的内容：https://jsfiddle.net/0cL2qaq1/2/

CSS

.navbar-text {
float: left !important;
margin-right: 10px;
}

.navbar-right {
float: right!important;
}