css - 语义 UI - 菜单项到下一行而不是长的水平滚动

Question

这是我的导航栏菜单代码

$(function () {
	$(".dropdown").dropdown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/>
<div class="ui container">
    <div class="ui secondary extra-large menu">
        <a class="item no-background brand" href="/">Brand</a>
        <a class="item no-background" href="/">Home</a>
        <a class="item no-background" href="/">Products</a>
        <a class="item no-background" href="/">Testimonials</a>
        <div class="ui no-background dropdown pointing item">
            Services
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Mobile</div>
                <div class="item">Tablet</div>
                <div class="item">Computer</div>
            </div>
        </div>
        <div class="ui dropdown pointing item">
            Other
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Hosting</div>
                <div class="item">Webmail</div>
                <div class="item">DNS</div>
            </div>
        </div>
        <div class="right item">
            <button class="ui button">Create Account</button>
        </div>
        <div class="right item">
            <button class="ui primary button">Login</button>
        </div>
    </div>

</div>

我希望没有出现的菜单项显示在移动设备的下一行中，但它会给我很长的水平滚动。如果可能的话，我希望他们根据屏幕尺寸进行调整。

Answer 1

您可以为此使用可堆叠菜单。然而，在文档中提到:

Stackable menus are intended to be used with only simple menu content. Stacked menus will not replicate all additional stylings for vertical menus like adjusting dropdown position.

$(function () {
	$(".dropdown").dropdown();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/>
<div class="ui container">
    <div class="ui secondary extra-large stackable menu">
        <a class="item no-background brand" href="/">Brand</a>
        <a class="item no-background" href="/">Home</a>
        <a class="item no-background" href="/">Products</a>
        <a class="item no-background" href="/">Testimonials</a>
        <div class="ui no-background dropdown pointing item">
            Services
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Mobile</div>
                <div class="item">Tablet</div>
                <div class="item">Computer</div>
            </div>
        </div>
        <div class="ui dropdown pointing item">
            Other
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item">Hosting</div>
                <div class="item">Webmail</div>
                <div class="item">DNS</div>
            </div>
        </div>
        <div class="right item">
            <button class="ui button">Create Account</button>
        </div>
        <div class="right item">
            <button class="ui primary button">Login</button>
        </div>
    </div>

</div>