Bootstrap 4 导航栏是垂直的而不是水平的？ [复制]答案

【问题标题】：A Bootstrap 4 navbar is vertical instead of horizontal? [duplicate]Bootstrap 4 导航栏是垂直的而不是水平的？ [复制]
【发布时间】：2019-03-07 03:36:33
【问题描述】：

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

为了让方向正确，我缺少什么？

【问题讨论】：

为什么要显示 PHP 代码？这与HTML有关，与PHP无关。只需向我们展示最终产品。
我添加了html，但它可能仍然与PHP以及控制html的菜单形成方式有关。
将navbar-expand 类添加到nav 元素中。
@miken32 - 你的评论效果很好，你能回答一下吗？

标签： php html css bootstrap-4

【解决方案1】：

要使您的导航栏水平，您需要为其添加一些样式（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

【讨论】：

【解决方案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>

或者如果你想使用导航栏请查看他们的文档。您缺少文档中的一些组件。

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

导航栏需要用.navbar-expand{-sm|-md|-lg|-xl} 包裹.navbar 以用于响应式折叠和配色方案类。

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

【讨论】：