css 是否可以在响应模式下将列表更改为工具栏？

bzzcjhmw 于 2022-12-15 发布在其他

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

我有下面的卡片。nav有很多项目（为了简洁起见，我在这里保留了一个）。

<div class="col-md-3">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">title</h3>
        </div>
        <div class="card-body p-0">
            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <NavLink href="javascript: void(0);" @onclick="() => ShowSearch()" class="nav-link">
                        <span class="fa-li pl-5"><i class="fas fa-search" /></span>
                        <span class="pl-4">Search</span>
                    </NavLink>
                </li>
            </ul>
        </div>
        <div class="card-footer">
            <NavLink href="Back" class="nav-link">
                <span class="fa-li pl-5"><i class="fas fa-arrow-alt-circle-left"/></span> 
                <span class="pl-1">Back</span>
            </NavLink>
        </div>
    </div>
</div>

一切都显示正确，甚至在移动的设备上。
然而，我想知道是否有可能将导航列表“转换”成一种工具栏（仍然在卡体中），并将项目显示在彼此旁边，只显示它们的图标。

有可能吗？

css

来源：https://stackoverflow.com/questions/74739503/is-it-possible-to-change-a-list-into-a-toolbar-in-responsive-mode

1条答案

按热度按时间

7eumitmz1#

Bootstrap 4没有自己的图标支持，但是要实现像这样的输出就使用下面的小字体库。
（一）

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />

<div class="col-md-3">
    <div class="card">
        <div class="card-body p-0">
            <ul class="list-inline">
                <li class="nav-item list-inline-item">
                    <i class="bi bi-cart"></i>
                </li>
                <li class="nav-item list-inline-item">
                    <i class="bi bi-twitter"></i>
                </li>
                <li class="nav-item list-inline-item">
                    <i class="bi bi-person-fill"></i>
                </li>
                
            </ul>
        </div>
    </div>
</div>

或
尝试像下面使用font-awesome

<head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--OR download above link css to any folder and call-->
    </head>

<div class="col-md-3">
    <div class="card">
        <div class="card-body p-0">
            <i class="fa fa-shopping-cart"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-user"></i>
        </div>
    </div>
</div>

（二）
制作此图标后，工具栏使用@media css，检查页面是否以响应模式打开，然后显示此工具栏，否则显示：无。
例如

.smallscreentoolbar
{
  display:none;
}
.largescreentoolbar
{
  display:block;
}

@media screen and (max-width: 600px) {
  .smallscreentoolbar{
    display: block;
  }
  .largescreentoolbar
  {
     display:none;
  } 
}

如有任何疑问，请发表意见。

赞(0）回复(0）举报 2022-12-15

我来回答

css 是否可以在响应模式下将列表更改为工具栏？

1条答案

相关问题

热门标签

最新问答