3
Hallo ich benutze das Twitter-Bootstrap-Framework, um eine Website für einen Kunden zu entwickeln, aber ich habe eine Wand getroffen und ich weiß nicht, was es verursachen könnte. Bevor ich weiter gehe, werde ich meinen HTML- und CSS-Code einwerfen und dann das Problem erklären.Einige Webseiten-Links funktionieren nicht
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
body {
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
/* TOP OF THE PAGE */
#header {
float: left;
width: 100%;
position: relative;
z-index: 999;
}
.topbar-section {
float: left;
width: 100%;
background: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.top-social {
float: left;
width: 100%;
}
.top-social a {
font-size: 14px;
color: #777;
line-height: 50px;
}
.top-social ul {
padding: 0;
margin: 0;
list-style: none;
}
.top-social ul li {
float: left;
padding: 0;
width: 50px;
border-left: 1px solid #ccc;
}
.top-social ul li.last {
border-right: 1px solid #ccc;
}
.top-social ul li a {
text-align: center;
display: block;
text-decoration: none;
}
.top-social a.email {
font-weight: 400;
float: left;
padding: 0 0 0 20px;
text-decoration: none;
}
.logo-section {
float: left;
width: 100%;
}
strong.logo {
float: left;
margin: 0;
padding: 20px 30px 20px 0;
}
strong.logo a {
font-size: 18px;
text-transform: uppercase;
}
.book-section {
float: right;
width: 100%;
padding: 15px 0;
}
.number-box {
float: left;
padding: 0 30px 0 0;
}
.number-box span {
color: #777;
display: block;
padding: 0;
}
.number-box strong {
font-size: 24px;
font-weight: 700;
color: #222;
display: block;
}
div.btn-book-box {
padding: 10px 0 0;
}
div.btn-book-box a.btn-book {
padding: 10px 15px;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background-color: #9bc83c;
}
div.btn-book-box a.btn-book:hover {
background: none;
border: 1px solid #444;
color: #222;
}
/*.navigation*/ .navbar {
border-radius: 0;
}
/*.navigation */.navbar-inverse {
background-color: transparent;
border-color: transparent;
}
/*.navigation */.navbar-inverse .navbar-collapse {
border-color: #ccc;
}
.nav-outer {
background: #fff;
border: 1px solid #999;
float: left;
width: 100%;
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}<div id="header">
<div class="topbar-section">
<div class="container">
<div class="col-md-6">
<div class="top-social">
<ul>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="last"><a href="#"><i class="fa fa-facebook-f"></i></a></li>
</ul>
<a href="mailto:" class="email" title="Send us an email">
<i class="fa fa-envelope-o"></i> [email protected]</a>
</div>
</div>
</div>
</div>
<div class="logo-section">
<div class="container">
<div class="col-md-6">
<strong class="logo"><a href="#">Pride Africa Safaris</a> </strong>
</div>
<div class="col-md-6">
<div class="book-section">
<div class="number-box">
<div class="number-text">
<span>Call us for any Query</span>
<strong><i class="fa fa-phone"></i> +256 7** 5** 6**</strong>
</div>
</div>
<div class="btn-book-box">
<a href="#" class="btn-book">Book Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="navigation">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-outer">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Trips</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Booking</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>Da Sie nun meinen Code gesehen haben, das Problem ist, wenn ich die div mit der Klasse Navigation umfassen, die Verbindungen innerhalb der Top-sozialen und Logo-Abschnitt divs statisch bleiben und nicht -reaktiv, aber wenn ich das div mit der Klassennavigation entferne, scheint alles normal zu funktionieren, was könnte das Problem hier sein? Danke im Voraus.
Klingt wie ein Skript Problem ... kein Skript gezeigt – charlietfl
@charlietfl, ich habe noch nicht einmal ein Skript erstellt, verwende nur die Standard jquery und Bootstrap-Js-Dateien – kellymandem
define 'non reactive' und' bleiben statische' – charlietfl