在手机屏幕中水平显示 navbar-nav

Question

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

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

网页视图： 链接 1 链接 2

移动端视图：

链接 1

链接 2

我想水平显示移动视图。试图找到正确的 css，但在花费数小时后找不到它。有人能指出我正确的方向吗？

Answer 1

引导程序 4

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

 <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>

Answer 2

添加这个 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 3

导航栏固定顶部将是您正在寻找的内容

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

Answer 4

移动视图中可能没有空间来并排显示两个链接。您可以尝试一些媒体查询来针对移动设备的特定分辨率（和其他视图 - 调查诸如 Bootstrap3 之类的东西以查看常见断点）。

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

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

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

Answer 5

使用这个 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");
});