Bootstrap Navbar在任何宽度上折叠

时间：2016-01-28 17:45:02

标签： javascript jquery html css twitter-bootstrap

我的问题是我的导航栏总是崩溃，我不知道为什么...... 我尝试了所有的东西，但没有任何效果。 希望您能够帮助我。 我只上传了自定义css和html。其余的是bootstrap

＆＃13;
＆＃13; 
/* general styles */
html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* padded section */
.pad-section {
    padding-bottom: 70px;
    padding-top: 70px;
}
.pad-section img {
    width: 100%;
}
.navbar-brand{
    color: whitesmoke;
}
.navbar-fixed-top{
    background-color: #34495e;
    color: whitesmoke;
}
.navbar-fixed-top .navbar-nav > li > a:hover,
.navbar-fixed-top .navbar-nav > li > a:focus {
    color:#e98b39;
    text-decoration: none;
}
.navbar-fixed-top .navbar-nav > li > a{
    color: whitesmoke;
}
.btn-default{
    background-color: rgba(236, 240, 241,0.5);
    color: #34495e;

}
.btn-default:hover{
    background-color: rgba(236, 240, 241,1.0);
    color: #e98b39;

}
.hr{
    background-color: #2c3e50;
}

/* vertical-centered text */
.text-vcenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.text-vcenter h1 {
    font-size: 4.5em;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

/* additional sections */
#home {
    background: url(../Img/IMG_1999.jpg) no-repeat center center fixed;
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#about {
}

#services {
    background-color: #e98b39;
    color: #ffffff;
}

#portfolio{
    color: #34495e;
    width: 100%;
}
.portfolio-list > li{
    list-style: none;
    float: left;
    padding: 7px;
}
.portfolio-button{
    background-color: #34495e;
    border: 0px;
    border-radius: 3px;
    color: whitesmoke;
}
.portfolio-button:hover{
    background-color: #34495e;
    border: 0px;
    border-radius: 3px;
    color: #e98b39;
}

#information {
    background: url(../Img/_MG_0410.jpg) no-repeat center center fixed;
    display: table;
    color: whitesmoke;
    height: 800px;
    position: relative;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#information .panel {
    opacity: 0.85;
}

#contact {
    height: 500px;

}

.form-horizontal{
    margin: 0 auto;
    margin-top: 60px;
    max-width: 60%;
}

.submit-button{
    margin-top: 10px; ;
    background-color:#e98b39;
    border: 0;
    border-radius: 3px;
    color:  #34495e;
}
.submit-button:hover{
    margin-top: 10px; ;
    background-color:#e98b39;
    border: 0;
    border-radius: 3px;
    color: white;
}
footer {
    padding: 20px 0;
}
footer .glyphicon {
    color: #333333;
    font-size: 60px;
}
footer .glyphicon:hover {
    color: #306d9f;
}
.offset-0 {
    padding-left: 0;
    padding-right: 0;
}
.container container-portfolio{
    width: 100%;
    margin-bottom: 0px;
    padding: 0px;
}
.pad-section .portfolio{
    padding-bottom: 0px ;
}
.navbar-nav > li{
    padding: 8px;
    float: left;
}
.navbar-right social{
    float: right;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta name="Matthias Skopek" content="Skopek-Art Portfolio" />
    <title>Skopek-Art</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet" />
    <link href="css/font-awesome-4.5.0/css/font-awesome.css" rel="stylesheet" />
    <link href="css/lightbox.css" rel="stylesheet">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-2.2.0.min.js"></script>
</head>
<body data-spy="scroll">
<nav class="navbar navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header ">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand" href="#home">SKOPEKART</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li class="page-scroll"><a href="#home" >Home</a></li>
            <li class="page-scroll"><a href="#about" >Über Mich</a></li>
            <li class="page-scroll"><a href="#services" >Fähigkeiten</a></li>
            <li class="page-scroll"><a href="#portfolio" >Portfolio</a></li>
            <li class="page-scroll"><a href="#contact" >Kontakt</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right social">
            <li><a href="https://www.facebook.com/Matthias-S-Photography-1435230113356609/?ref=hl"><i class="fa fa-lg fa-facebook"></i></a></li>
            <li><a href="https://www.instagram.com/matthias_skopek/"><i class="fa fa-lg fa-instagram"></i></a></li>
            <li><a href="https://500px.com/matthiasskopek"><i class="fa fa-lg fa-500px"></i></a></li>
        </ul>
    </div>
        </div>
</nav>
<section id="home" class="home">
    <div class="text-vcenter">
        <h1>Hallo Welt</h1>
        <h2>Mein Name ist Matthias Skopek und ich bin 18 Jahre und begeisterter Fotograf, Grafiker und Web-Designer.<br>
            Ich besuche gerade die HTL Leonding im Bereich Medientechnik</h2>
        <a href="#about" class="btn btn-default btn-lg">Wollen Sie mehr erfahren?</a>
    </div>
</section>
<section id="about" class="pad-section">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <img src="Img/pf-pic.jpg" alt="" style="max-width: 300px;max-height: 500px;"/>
            </div>
            <div class="col-sm-6 text-center">
                <h2>Hallo mein Name ist Matthias Skopek ich bin 18 Jahre und begeisterter Fotograf, Grafiker und Web-Designer.</h2>
                <p class="lead">
                    Ich wohne in Leonding und besuche die HTL Leonding im Bereich Medientechnik im 3. Jahr.
                    Ich war schon immer kreativ und deswegen begeistert mich auch das Fotografieren und Design.
                    Ich arbeite gerne mit Menschen zusammen und das gefällt mir in meinem Bereich auch sehr gut.
                    Da man sich auf das Team verlassen können muss.
                </p>
            </div>
        </div>
    </div>
</section>
<section id="services" class="pad-section">
    <div class="container">
        <h2 class="text-center">Meine Fähigkeiten</h2> <hr />
        <div class="row text-center">
            <div class="col-sm-4 col-xs-6">
                <i class="fa fa-desktop fa-5x"></i>
                <h4>Web-Design</h4>
                <p>Ich lerne Web-Design seit mittlerweile 3 Jahren in der Schule und ich habe auch schon einpaar kleiner Projekte für Firmen von Bekannten gemacht.
                    Vielleicht sind sie der nächste.
                </p>
            </div>
            <div class="col-sm-4 col-xs-6">
                <i class="fa fa-camera-retro fa-5x"></i>
                <h4>Fotografie</h4>
                <p>Ich fotografiere schon seit über 5 Jahren, aber erst seit 2-3 Jahren beschäftige ich mich intensiv damit.
                    Ich liebe es einfach kreativ zu sein und Dinge ins rechte Licht zu rücken.
                </p>
            </div>
            <div class="col-sm-4 col-xs-6">
                <i class="fa fa-pencil fa-5x"></i>
                <h4>Grafik Design</h4>
                <p>Von Visitenkarten bis Logos habe ich alles schon gemacht und in diesem Bereich setzt einem nur die Kreativität Grenzen.</p>
            </div>
        </div>
    </div>
</section>
<section id="information" class="pad-section">
    <div class="container">

    </div>
</section>
<section id="portfolio" class="pad-section" >
    <div class="container">
        <h2 class="text-center">Portfolio</h2> <hr>
</div>
    <div class="container-slide">
        <div class="row img-gallary">
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_0063.jpg" data-lightbox="ptfo"><img src="Img/IMG_0063.jpg"></a>
            </div>
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_1466.jpg" data-lightbox="ptfo"><img src="Img/IMG_1466.jpg"></a>
            </div>
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_1112.jpg" data-lightbox="ptfo"><img src="Img/IMG_1112.jpg"></a>
            </div>
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_1016.jpg" data-lightbox="ptfo"><img src="Img/IMG_1016.jpg"></a>
            </div>
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_0135.jpg" data-lightbox="ptfo"><img src="Img/IMG_0135.jpg"></a>
            </div>
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_0976.jpg" data-lightbox="ptfo"><img src="Img/IMG_0976.jpg"></a>
            </div>
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_0725.jpg" data-lightbox="ptfo"><img src="Img/IMG_0725.jpg"></a>
            </div>
            <div class="col-sm-3 offset-0">
                <a href="Img/IMG_2034.jpg" data-lightbox="ptfo"><img src="Img/IMG_2034.jpg"></a>
            </div>
        </div>
    </div>
</section>
</div>
<section class="contact">
    <section id="contact" >
        <form class="form-horizontal" role="form" method="post" action="index.php" >
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" name="name" placeholder="Vor-Nachname" value="">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
                </div>
            </div>
            <div class="form-group">
                <label for="message" class="col-sm-2 control-label">Nachricht</label>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" id="message" name="message"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="human" name="human" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                    <input id="submit" class="submit-button" name="submit" type="submit" value="Senden" class="btn btn-primary">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                </div>
            </div>
        </form>
    </section>
</section>
<footer>
    <hr />
    <div class="container">
        <p class="text-right">Copyright &copy; Matthias Skopek 2016 </p>
    </div>
</footer>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

And this is how it looks like

1 个答案:

答案 0 :(得分：0)

你不需要这两次（在头部及之前）

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-2.2.0.min.js"></script>

相关问题
最新问题