Question

我正在尝试使用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>

我丢失了正确的方向信息吗？

Answer 1

默认情况下，移动设备的Bootstrap导航栏是折叠的。这导致垂直布局。您可以添加navbar-expand类以将其扩展为水平布局。使用典型的Bootstrap方法，这也可能取决于屏幕尺寸：例如navbar-expand-lg。

导航栏需要带。的环绕式导航栏。 navbar-expand {-sm | -md | -lg | -xl}用于响应式折叠和配色方案类。

https://getbootstrap.com/docs/4.0/components/navbar/

Answer 2

问题是您应该使用导航而不是导航栏

<ul class="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>

或者如果您想使用导航栏，请查阅其文档。您缺少文档中的某些组件。

Answer 3

要保留Bootstrap 4的所有内容-只需将ul标签上的导航栏类更改为仅导航。您可以将navbar类保留在nav标签上-这会增加额外的填充。

<nav class='nav navbar navbar-dark'>
    <ul class="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>

Answer 4

要使导航栏水平放置，您需要在其中添加一些样式（CSS）。有两种方法。第一种是使用内联CSS，第二种是外部CSS。从第一种方式更改代码

<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 class='navbar navbar-dark'>
<ul class="navbar-nav">
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/1'>First</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/1'>1</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/2'>2</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/3'>3</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/4'>Last</a></li>
</ul>

和第二种方法是在CSS文件中找到nav-item类，并为其更新另一种样式，即

nav-item {
display: inline;
 }

从这两种方式中，最优选的是第二种方式，您也可以点击链接。 https://www.w3schools.com/css/css_navbar.asp

Bootstrap 4导航栏是垂直的，而不是水平的？

4 个答案: