Question

我是Bootstrap的新手，我想创建一个自定义的导航栏，其中圆形徽标在中间穿过它：

发现它很复杂，我试图寻找类似的解决方案，但发现this。但是应用navbar并不能给我期望的外观：

那么您对我如何创建此导航栏或修复现有导航栏有何建议？

Answer 1

您可以使用CSS修复此问题。您需要创建一个带有徽标的nav元素，并在两侧分别添加两个无序列表。然后，将position:absolute添加到图像并更改顶部值以使其居中。这是您需要应用的HTML结构和CSS代码：

HTML：

        <nav>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
            <div>
                <img src="https://via.placeholder.com/150" alt="">
            </div>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>
        </nav>

CSS：

       nav {
           width: 100vw;
           height: 50px;
           margin-top: 30px;
           display: flex;
           flex-flow: row nowrap;
       }
       ul {
           height: inherit;
           display: flex;
           flex-flow: row nowrap;
           list-style: none;
           margin-left: 50px;
       }
       li {
           padding: 20px;
       }
       div {
           position: relative;
       }
       img {
           position: absolute;
           height: 100px;
           width: 100px;
           top: -20px;
       }

导航栏中的居中圆形徽标？

1 个答案: