Question

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

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

网络视图：链接1链接2

移动视图：

链接1

链接2

我希望水平显示移动视图。试图找到合适的CSS，但在花了几个小时之后找不到它。有人能指出我正确的方向吗？

Answer 1

添加此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 2

引导程序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 3

Navbar Fixed Top将是您正在寻找的

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");
});

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

5 个答案: