Question

我刚开始研究一小时前的bootstrap，我觉得这将是一件轻而易举的事。我试图将典型的CSS样式转换为引导程序，但它给我带来了很大的问题，唯一显示的内容是导航栏。

这是我的代码：

<?php
    session_start();
    require 'config.php';
?>

<!DOCTYPE html>
<html>
<head>
    <title>Processors</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="CSS/Fonts.css">
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
    <link href="Bootstrap/css/custom.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="Bootstrap/js/jquery-3.2.0.min.js"></script>
    <script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.php" class="navbar-brand"><img src="Images/Nav/logo.png" width="30px"></a>
        </div>

        <div class="navbar-collapse collapse av navbar-nav navbar-right">
            <ul class="nav navbar-nav">
                <li><a href="case.php">CASE</a></li>
                <li><a href="accessories.php">ACCCESSORIES</a></li>
                <li><a href="peripherals.php">PERIPHERALS</a></li>
                <li><a href="hdd.php">STORAGE</a></li>
                <li><a href="psu.php">POWER SUPPLY</a></li>
                <li><a href="graphicCard10xx.php">GRAPHIC CARD</a></li>
                <li><a href="memory.php">MEMORY</a></li>
                <li><a href="motherboard.php">MOTHERBOARD</a></li>
                <li><a href="processor.php">PROCESSOR</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="search.php"><img src="Images/Nav/searchIco.png" width="22px"></a></li>
                <li><a href="cart.php"><img src="Images/Nav/cartIco.png" width="22px"></a></li>
                <li><a href="login.php"><img src="Images/Nav/userIco.png" width="22px"></a><li>
            </ul>
        </div>
    </div>
</nav> <!-- nav End --> 
    <p style="color: black">
        ASDGASDFASDFDASFADSFASDASDGASDFASDFDASFADSFASDASDGASDFASDFDASFADSFASDASDGASDFASDFDASFADSFASDASDGASDFASDFDASFADSFASDASDGASDFASDFDASFADSFASDASDGASDFASDFDASFADSFASDASDGASDFASDFDASFADSFASDASDGAS
    </p>
</body> 
</html>

我对导航栏进行了非常轻微的修改，我认为这不是问题所在，但我还是会把它放在这里以防万一

.navbar {
    background: #1f63aa;
}

@font-face {
    font-family: navBarFont;
    src: url(../Fonts/BGT.ttf);
}

@font-face {
    font-family: Calibri;
    src: url(../Fonts/Calibri.ttf);
}

.navbar-default a {
    font-family: navBarFont;
    font-size: 22px;
    color: white;
}

.navbar-nav li a {
    color: #fff !important; 
}

.navbar-nav li a:hover {
    color: #dddddd !important; 
}

.navbar-toggle {
    background-color: #1f63aa !important;
    border: 0px;
}

.icon-bar {
    background-color: #fff !important;
}

请参阅此JSFiddle以获取示例：https://jsfiddle.net/5o4orrLo/1/

Answer 1

您已将.navbar-fixed-top类用于导航栏，使其固定位置，以便您的其他文字隐藏在其下方。如果您不需要固定导航栏，请将其删除。或者用<p>包裹<div>并添加padding-top等于导航栏的高度。

Bootstrap仅显示导航栏

1 个答案: