Bootstrap 4 导航栏是垂直的而不是水平的？[重复]
发布于2024-11-25 20:11 阅读(189) 评论(0) 点赞(3) 收藏(1)
我正在尝试使用 PHP 动态生成水平分页菜单。这基本上可行，我正在使用 Bootstrap 4 的 Nav 来组织它。
但是，虽然菜单本身是正确的，但它是垂直输出而不是水平输出。
这是输出菜单的代码。据我所知，代码是正确的。我把它包括进来以防生成器出现问题。
public function paginateList($Page = 1, $Limit = 15, $Route = '')
{
$Count = $this->CoreImages->countImageTotal();
$NumberOfPages = floor($Count / $Limit);
$obj = "<nav class='navbar navbar-dark'>";
$obj .= '<ul class="navbar-nav">';
$obj .= "<li class='nav-item'><a class='nav-link' href='" . $Route . '/1' . "'>" . 'First' . "</a></li>";
for($i = 2; $i < $NumberOfPages; $i++) {
$obj .= "<li class='nav-item'>";
$obj .= "<a class='nav-link' href='" . $Route . '/' . $i . "'>" . $i . "</a>";
$obj .= "</li>";
}
$obj .= "<li class='nav-item'><a class='nav-link' href='" . $Route . '/' . $NumberOfPages . "'>" . 'Last' . "</a></li>";
$obj .= '</ul>';
$obj .= "</nav>";
return $obj;
}
这是实际的输出，用‘echo’运行：
<nav class='navbar navbar-dark'>
<ul class="navbar-nav">
<li class='nav-item'><a class='nav-link' href='/1'>First</a></li>
<li class='nav-item'><a class='nav-link' href='/1'>1</a></li>
<li class='nav-item'><a class='nav-link' href='/2'>2</a></li>
<li class='nav-item'><a class='nav-link' href='/3'>3</a></li>
<li class='nav-item'><a class='nav-link' href='/4'>Last</a></li>
</ul>
</nav>
我缺少什么才能获得正确的方向？
解决方案
默认情况下，Bootstrap 的导航栏在移动设备上是折叠的。这会导致垂直布局。您可以添加类navbar-expand以将其扩展为水平布局。这也可以依赖于屏幕尺寸，使用典型的 Bootstrap 方法：例如navbar-expand-lg。
.navbar导航栏需要带有.navbar-expand{-sm|-md|-lg|-xl}响应式折叠和配色方案类的包装。
https://getbootstrap.com/docs/4.0/components/navbar/
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/537211/bbaa90fcf34f97845c3d/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力