html - 如何使用 Bootstrap 4 创建图标菜单？

Question

我正在创建一个带有图标(svg 图标)的导航栏。

使用 Bootstrap 4 实现此目标的最佳方法是什么？

这就是我想要的:

这是我最接近的(没有为我的图标或链接提供固定大小):

<div class="row justify-content-center">
    <div class="col-sm-10">
        <nav class="navbar d-flex align-items-end">
            <a class="navbar-item active" href="#">
                <img src="../images/icons/icon-type-blue.svg">
                Type</a>
            <a class="navbar-item" href="#">
                <img src="../images/icons/icon-size-lightgrey.svg">
                Size</a>
            <a class="navbar-item" href="#">
                <img src="../images/icons/icon-fitting-lightgrey.svg">
                Fitting</a>
            <a class="navbar-item" href="#">
                <img src="../images/icons/icon-results-lightgrey.svg">
                Results</a>
        </nav>
    </div>
</div>

使用以下 CSS:

.navbar{
    padding: 2em;
    border-bottom: solid 2px #00588A;
}

.navbar a{
    font-size: 1.25em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #ccc;
}

.navbar a.active{
    color: #00588A;
}

.navbar a img{
    margin-bottom: 0.75em;
}

也许我没有以正确的方式整合？

给链接一个固定大小是最好的方法吗？

Answer 1

试试这个代码。

<div class="row justify-content-center">
    <div class="col-sm-12">
        <nav class="navbar d-flex align-items-end">
            <div class="col-sm-3">
                <a class="navbar-item active" href="#">
                <img src="../images/icons/icon-type-blue.svg">Type</a>
            </div>
            <div class="col-sm-3">
                <a class="navbar-item" href="#">
                <img src="../images/icons/icon-size-lightgrey.svg">Size</a>
            </div>
            <div class="col-sm-3">
                <a class="navbar-item" href="#">
                <img src="../images/icons/icon-fittinglightgrey.svg">Fitting</a>
            </div>
          <div class="col-sm-3">
                <a class="navbar-item" href="#">
                <img src="../images/icons/icon-resultslightgrey.svg">Results</a>
          </div>
        </nav>
    </div>
</div>