css 修复向左倾斜的导航条

gab6jxml 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(140)

我正在为我的第一个入门前端项目的一个学校俱乐部制作一个网站，我一直在使用CSS的引导库，但是我遇到了一个小问题，我的导航栏不是水平居中的，而是向左倾斜。我希望标题和图标都在左边，然后列表项在容器的另一边，所以我玩了一下边距，但它从来没有真正工作。谢谢你帮忙。

<nav class="navbar navbar-expand-lg ">
      <div class="container"> 
            <a class="navbar-title" href="home.html">Title</span>
                <img class="navbar-brand" src="https://i.imgur.com/qRujsE0.jpg"></img>
            </a> 
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-btarget="#navmenu">
                <span class="navbar-toggle-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item"><a href="home.html" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
                    <li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a</li>
                    <li class="nav-item"><a href="join.html" class="nav-link">Join Us</a></li>
                </ul>
            </div>
      </div>
</nav>

css

来源：https://stackoverflow.com/questions/75329416/fixing-a-left-leaning-navbar

1条答案

按热度按时间

2izufjch1#

首先，我建议指定图像的宽度和高度。然后，你必须使用类“.ms-auto”来获得导航在右边对齐，就像每个Bootstrap文档一样。你也可以使用Bootstrap flexbox和类“.justify-content-between”。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg ">
    <div class="container"> 
        <a class="navbar-brand" href="#">
            <img src="https://i.imgur.com/qRujsE0.jpg" width="30" height="30" class="d-inline-block align-top" alt="" />
            Title
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navmenu">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a href="home.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="about.html" class="nav-link">About Us</a></li>
                <li class="nav-item"><a href="contact.html" class="nav-link">Contact Us</a</li>
                <li class="nav-item"><a href="join.html" class="nav-link">Join Us</a></li>
            </ul>
        </div>
    </div>
</nav>

赞(0）回复(0）举报 2023-02-06

我来回答

css 修复向左倾斜的导航条

1条答案

相关问题

热门标签

最新问答