亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

導航欄未正確堆疊

導航欄未正確堆疊

慕的地8271018 2024-01-22 14:52:23
在超小尺寸屏幕中,我希望將 navbar-brand 和 navbar-nav 垂直堆疊。<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">    <div class="container">        <a class="navbar-brand" href="#">Ristorante Con Fusion</a>        <ul class="navbar-nav mr-auto">            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>        </ul>    </div></nav>但由于某種原因,它看起來像這樣如何在超小尺寸屏幕中擁有 navbar-brand 下的 navbar-nav?
查看完整描述

2 回答

?
慕森王

TA貢獻1777條經驗 獲得超3個贊

您是否希望導航項也垂直堆疊?我想你正在尋找這個...


<nav class="navbar navbar-dark navbar-expand bg-primary fixed-top">

    <div class="container flex-column flex-sm-row">

        <a class="navbar-brand" href="#">Ristorante Con Fusion</a>

        <ul class="navbar-nav mr-sm-auto mr-0">

            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>

            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>

            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>

            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

        </ul>

    </div>

</nav>

https://codeply.com/p/UNjoLoEnSn


查看完整回答
反對 回復 2024-01-22
?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

使用.collapse類和按鈕切換器。


更新


只需在標簽中添加flex-column flex-lg-row類即可nav。


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


<nav class="navbar navbar-expand-lg navbar-light bg-light flex-column flex-lg-row">

  <a class="navbar-brand" href="#">Navbar</a>

  <ul class="navbar-nav mr-auto">

      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>

      <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>

      <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>

      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

    </ul>

</nav>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


查看完整回答
反對 回復 2024-01-22
  • 2 回答
  • 0 關注
  • 152 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號