Question

我正在尝试为移动设备创建响应式导航栏，但我无法正确调整链接容器的大小。我似乎也无法让文本垂直居中。我曾尝试在两种情况下使用自动填充和边距，但它们似乎没有做任何事情。我正在使用Bootstrap。

我的问题是：

如何将文本垂直居中于其容器中？
如何将每个链接容器的宽度设置为文本的宽度
如何让每个容器之间的间距相同，以便它们一起填充屏幕的宽度？

HTML

<div class="container" id="nav-container-mobile">
                <ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
                        <a class="nav-link" href="#Profile">
                            <div class="nav-link-container-mobile">Profile</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
                        <a class="nav-link" href="#Experience">
                                <div class="nav-link-container-mobile">Experience</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
                        <a class="nav-link" href="#Skills">
                                <div class="nav-link-container-mobile">Skills</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
                        <a class="nav-link" href="#project">
                            <div class="nav-link-container-mobile">Projects</div>
                        </a>
                    </li>
                    <li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
                        <a class="nav-link" href="#Contact">
                            <div class="nav-link-container-mobile">Contact</div>
                        </a>
                    </li>
                </ul>
            </div>

CSS

#nav-container-mobile {
            position: absolute;
            width: 100%;
            height: 70px;
            padding: 0;
            background: #292929;
            z-index: 5;
        }
        #nav-list-mobile {
            width: 100%;
            height: 100%;
            margin: 0;
            vertical-align: middle;
        }
        .nav-link-horizontal {
            height: 100%;
            width: 15vw;
            min-width: 50px;
        }
        .nav-link-container-mobile {
            padding: auto;
            height: 100%;
            overflow-wrap: break-word;
        }

        .nav-link { 
            color: #aeaeae; 
        }

感谢任何帮助或建议。

JSFiddle

Answer 1

使用Bootstrap 4 Nav Fill or Justify会更简单，然后根据需要更改背景颜色和其他样式。

https://www.codeply.com/go/WsWHHIfRlh

git rebase -i -p HEAD~4

无序列表内联垂直对齐和响应间距

1 个答案: