在移动屏幕中水平显示 navbar-nav

Question

下面的代码在普通桌面视图中水平显示。但是，在手机屏幕上，它是垂直显示的。

    <ul class="nav navbar-nav">
            <li>Link 1</li>
            <li>Link 2</li>
    </ul>

网络视图： Link 1 Link 2

移动视图：

Link 1

Link 2

我想水平显示移动视图。试图找到正确的 css，但花了几个小时后还是找不到。有人能给我指出正确的方向吗？

Answer 1

导航栏固定顶部就是您要找的东西

http://getbootstrap.com/components/#navbar-fixed-top

Answer 2

移动视图中可能没有 space 来并排显示两个 link。您可以尝试一些媒体查询来针对移动设备的特定分辨率（和其他视图 - 调查类似 Bootstrap3 的内容以查看常见的断点）。

试试这个，它会让每个 link 成为屏幕宽度的一半，所以它们应该并排放置，假设你的 CSS 的其余部分确保没有列表样式等：

@media (max-width: 767px) {
    .navbar-nav li {
        padding: 0;
        margin: 0;
        width: 50%;
    }
}

您可能应该 post 您的 CSS 代码，以便我们也能够提供更多帮助。

Answer 3

使用这个 HTML

<div id="nav-btn">Button</div>
<ul class="sf-menu">
    <li><a href="#">Item 1</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 1.1</a>

            </li>
            <li><a href="#">Subitem 1.2</a>

            </li>
            <li><a href="#">Subitem 1.3</a>

            </li>
            <li><a href="#">Subitem 1.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 2.1</a>

            </li>
            <li><a href="#">Subitem 2.2</a>

            </li>
            <li><a href="#">Subitem 2.3</a>

            </li>
            <li><a href="#">Subitem 2.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 3.1</a>

            </li>
            <li><a href="#">Subitem 3.2</a>

            </li>
            <li><a href="#">Subitem 3.3</a>

            </li>
            <li><a href="#">Subitem 3.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 4</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 4.1</a>

            </li>
            <li><a href="#">Subitem 4.2</a>

            </li>
            <li><a href="#">Subitem 4.3</a>

            </li>
            <li><a href="#">Subitem 4.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 5</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 5.1</a>

            </li>
            <li><a href="#">Subitem 5.2</a>

            </li>
            <li><a href="#">Subitem 5.3</a>

            </li>
            <li><a href="#">Subitem 5.4</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Item 6</a>

        <div class="mobnav-subarrow"></div>
        <ul>
            <li><a href="#">Subitem 6.1</a>

            </li>
            <li><a href="#">Subitem 6.2</a>

            </li>
            <li><a href="#">Subitem 6.3</a>

            </li>
            <li><a href="#">Subitem 6.4</a>

            </li>
        </ul>
    </li>
</ul>

CSS

#nav-btn {
    display: none;
    font-size: 20px;
    font-weight: bold;
    background-color: blue;
    color: white;
    padding: 10px;
    cursor: pointer;
}
.nav-subarrow {
    display: none;
}
@media only screen and (max-width: 480px) {
    #nav-btn {
        display: block;
    }
    .nav-subarrow {
        display: block;
        background-color: #0f3975;
        opacity: .3;
        border-bottom: 1px solid white;
        border-top: 1px solid black;
        height: 20px;
        width: 30px;
        background-position: top left!important;
        position: absolute;
        top: 8px;
        right: 10px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }
    .sf-menu {
        width: 100%!important;
        display: none;
    }
    .sf-menu.xactive {
        display: block!important;
    }
    .sf-menu li {
        float: none!important;
        display: block!important;
        width: 100%!important;
    }
    .sf-menu li a {
        float: none!important;
    }
    .sf-menu ul {
        position:static!important;
        display: none!important;
    }
    .xpopdrop ul {
        display: block!important;
    }
}

JS

$('#nav-btn').click(

function () {
    $('.sf-menu').toggleClass("xactive");
});



$('.nav-subarrow').click(

function () {
    $(this).parent().toggleClass("xpopdrop");
});

Answer 4

添加这个CSS

.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}

.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

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

Check This Demo

Answer 5

Bootstrap 4

用 nav 和 navbar-expand class 包装你的代码就可以了。

 <nav class="navbar navbar-expand navbar-light">
    <ul class="nav navbar-nav">
            <li class="nav-item pl-2">Link 1</li>
            <li class="nav-item pl-2">Link 2</li>
    </ul>
 </nav>

在移动屏幕中水平显示 navbar-nav

Show navbar-nav horizontally in mobile screen

html

css

twitter-bootstrap

angular-ui-bootstrap

twitter-bootstrap-3