Question

我的导航栏右侧有两个按钮，在响应式菜单中按钮按顺序排列。

是否可以将按钮设为内联，因此两个按钮位于第一行的顶部。

Answer 1

使用这可能有助于你

<ul class="nav navbar-nav navbar-right">
                <li>
                    <span class="navbar-btn btn-space btn-top-space">
                        <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info">
                            <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP)
                        </a>
                    </span>
                       <span class="navbar-btn btn-top-space">
                        <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success">
                            <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk)
                        </a>
                    </span>
                </li>
            </ul>

Answer 2

你可以这样试试。

您必须添加自定义媒体样式。

的CSS -

@media (max-width: 767px) {
    .nav.top-nav  li{
        display:inline-block;
    }
}

Html -

 <ul class="nav top-nav navbar-nav navbar-right">
    <li>
        <p class="navbar-btn btn-space btn-top-space">
            <a href="https://url.com" target="_blank" title="Customer Payment Panel (CPP)" class="btn-sm btn-info">
                <span class="glyphicon glyphicon-user"></span> <strong>Customer Panel</strong> (CPP)
            </a>
        </p>
    </li>
    <li>
        <p class="navbar-btn btn-top-space">
            <a href="https://url.com" target="_blank" title="Control Panel (Plesk)" class="btn-sm btn-success">
                <span class="glyphicon glyphicon-cog"></span> <strong>Control Panel</strong> (Plesk)
            </a>
        </p>
    </li>
</ul>

响应式菜单（Bootstrap） - 按钮内联

2 个答案: