html - 响应式标题定位

问题描述

我使用引导程序 4.5 开发了一个标头

<nav class="navbar navbar-expand-sm navbar-light">
<!-- Brand -->
<a class="navbar-brand" href="#">
    <img src="logo.png">
</a>

<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
    aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">

     <!-- Left -->
    <ul class="navbar-nav left-menu mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item3</a>
        </li>
    </ul>

    <!-- Right -->
    <ul class="navbar-nav ml-auto right-menu">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item6</a>
        </li>
    </ul>
</div>

对于平板电脑，我想更改元素的排列如下：

我使用媒体查询：@media (max-width: 991.98px) { ... } 但我不知道如何将左侧菜单（mr-auto）转换为菜单下方。谢谢！

标签： htmljquerycssbootstrap-4

您正在寻找的是引导程序的类order-X，其中x是元素的顺序。

使用您当前的标记，您可以在移动设备上添加订单，然后在桌面设备上进行更改。
请注意，您可以更改标记以仅更改桌面上的顺序。

步骤 1：
定义元素的顺序

标志永远有order-1
order-3默认情况下，左侧菜单将具有then order-md-2。
右键菜单总是有order-2。

第 2 步：
定义左侧菜单的宽度

默认宽度为 100 col-12。
宽度自动稍后col-md-auto。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="navbar">
   <img src="//via.placeholder.com/150" class="order-1" alt="">
    <ul class="navbar-nav left-menu mr-auto order-3 order-md-2 col-12 col-md-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item1</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item2</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item3</a>
        </li>
    </ul>

    <!-- Right -->
    <ul class="navbar-nav ml-auto right-menu order-2">
        <li class="nav-item active">
            <a class="nav-link" href="#">Item4</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item5</a>
        </li>
        <li class="nav-item item-menu">
            <a class="nav-link" href="#">Item6</a>
        </li>
    </ul>
   </div>

html - 响应式标题定位

问题描述

解决方案

推荐阅读