引导导航栏 折叠任何宽度
Bootstrap Navbar Collapse on any width
我的问题是我的导航栏总是折叠，我不知道为什么......我已经尝试了所有方法，但没有任何效果。希望你能帮助我。我只上传了自定义 css 和 html。其余的都是引导程序
/* 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;
}<!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 © 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>这就是它的样子
你不需要这个两次（在头部和之前）
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.2.0.min.js"></script>相关文章：
- 函数参数中的数据与指定变量之间的任何性能差异
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- jQuery中是否内置了任何字符串格式化函数
- ExtJS——在展开/折叠时调整面板高度
- 在单击任何位置时隐藏元素，而不检查每次DOM单击
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 有任何可能将facebook实时信使整合到一个网站中
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- AJAX:$_GET不返回任何值
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 将事件处理程序绑定到任何可能的事件
- 在Highcharts中，我们可以通过任何方式在渲染图表之前获得plotWidth和plotHeight
- 任何方式使AJAX调用Gmail API，而无需通过JS库
- document.styleSheets不返回任何内容
- 角度的项目列表 ng 重复，ng 单击显示全宽描述
- 在D3.js中，有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 有没有一种技术来确定任何给定视口的页面折叠位置
- 引导导航栏 折叠任何宽度
- 如何在不折叠其他列的情况下创建具有全宽内容的引导可折叠面板
- Jquery移动动态可折叠内容不采用任何样式
