Почему моя навигационная панель начальной загрузки не отображается встроенной в bootstrap 4?

Я создал отдельный файл заголовка в php, чтобы я мог повторно использовать его на каждой странице, включив его с помощью функции включения php, но в страница заголовка, когда я писал код простой панели навигации, она отображалась в элементах списка, а не как встроенная.

(Этот вопрос не совсем совпадает с любым другим вопросом, отмеченным кем-то как дубликат, я просмотрел разные вопросы, чтобы найти свою проблему, но не нашел ни одного, поэтому задал этот вопрос сам)

Вот мой код:

index.php (главная индексная страница)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
</head>
<body>
   <?php include 'header.php'; ?>
   
   <div>
       
   </div>
   
   <?php include 'footer.php'; ?>
   
   <script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
   <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
</body>
</html>

header.php (страница заголовка, на которой я создаю загрузочную панель навигации)

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.php">O.S.P</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="about-us.php">About Us</a></li>
            <li><a href="sign-in.php">Sign In</a></li>
            <li><a href="sign-up.php">Sign Up</a></li>
        </ul>
    </div>
</nav>

а вот и index.css (дополнительный файл CSS)

.nav li{
    display: inline;
}

в конце концов, когда я запускаю свою страницу, она отображается так:

Выходное изображение браузера моей страницы:

введите здесь описание изображения


php html jquery css bootstrap-4
person Adnan Memon    schedule 24.03.2018    source источник
comment
Вы используете Bootstrap 3 или 4? Эта панель навигации предназначена для Bootstrap 3. Прочитайте документацию.   -  person Zim    schedule 24.03.2018
comment
Да, на самом деле я использую Bootstrap 4, и я думаю, что навигационная панель также работает в версии 4, но я прочитаю ее документацию, чтобы подтвердить это.   -  person Adnan Memon    schedule 27.03.2018

Ответы (1)


arrow_upward
-2
arrow_downward

Обновить Bootstrap3 URL Работает

увидеть эту скрипку

https://jsfiddle.net/xv6mkfo8/3/

person Shaik    schedule 24.03.2018
comment
почему голосование против? - person Shaik; 24.03.2018
comment
да, это работает, но вы разместили ссылку на бутстрап 3, а я использую бутстрап 4, поэтому эта проблема возникает, я хочу, чтобы она была исправлена ​​в бутстрапе 4. - person Adnan Memon; 27.03.2018
comment
хорошо, я обновил свою скрипку с помощью bootstrap4. используйте эту скрипту jsfiddle.net/xv6mkfo8/8, если она вам полезна, примите ее как ответ - person Shaik; 27.03.2018
comment
@shaikh, это не работает, братан, панель навигации встроена, но свернутая кнопка не работает. - person Adnan Memon; 28.03.2018
comment
извините, я забыл проверить это, теперь я отредактировал свою скрипку, проверьте ее jsfiddle.net/xv6mkfo8/11 - person Shaik; 29.03.2018