0
Ich arbeite an Web-Entwicklung. Beim Codieren mit Bootstrap-Framework habe ich ein Problem. Im Reaktionstest ist noch etwas Platz zwischen der Navigationsleiste und dem rechten Bildschirmrand vorhanden. An dieser Stelle befindet sich eine Bildlaufleiste. Was soll ich tun, wenn ich meine Navigationsleiste hinter der Bildlaufleiste haben möchte kann mir jemand sagen, wo ich in meinem Code falsch gelaufen bin.Warum ist zwischen der Navigationsleiste und dem rechten Bildschirmrand noch Platz?
body {
position: relative;
width: 100%;
}
.abhudaya {
padding-top: 2.5%;
padding-bottom: 1%;
width: 100%;
background-color: #222730;
}
.logo {
width: 350px;
height: auto;
margin-left: 0%;
}
.contact-address-icon {
width: 26px;
height: auto;
margin-left: 2%;
}
.contact-address-headding {
margin-left: 3px;
color: white;
}
.contact-email-address {
margin-left: 30px;
color: white;
}
.navigation1 {
background-color: #242933;
width: 100%;
}
.nav-tabs li a {
color: #777;
}
.navbar {
margin-bottom: 0;
background-color: #242933;
border: 0;
font-size: 16px !important;
letter-spacing: 4px;
opacity: 0.9;
}
.navbar li a,
.navbar .navbar-brand {
color: #d5d5d5 !important;
}
.navbar-nav li:hover a:hover {
color: #fff !important;
background-color: red;
}
.navbar-nav li.active a {
color: #fff !important;
background-color: red !important;
}
.open .dropdown-toggle {
color: #fff;
background-color: red !important;
}
.dropdown-menu li a {
color: #000 !important;
}
.dropdown-menu li:hover a:hover {
background-color: #F9F1F0 !important;
color: red !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>index abhudaya</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="" data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="abhudaya container-fluid">
<div class="row">
<div class="col-md-4">
<img src="images/logo.png" alt="logo" class="logo">
</div>
<div class="col-md-3">
<p><img src="images/call.png" alt="call" class="contact-address-icon"><i class="fa fa-phone" aria-hidden="true" style="color: white;"></i><span class="contact-address-headding">lorem</span>
<br><span class="contact-email-address">lorem</span></p>
</div>
<div class="col-md-3">
<p><img src="images/location.png" alt="location" class="contact-address-icon"><span class="contact-address-headding">lorem</span><br><span class="contact-email-address">lorem</span></p>
</div>
</div>
</div>
<div class="navigation1 container-fluid">
<nav class="navbar navbar-default container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle navigation-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">HOME</a></li>
<li><a href="#">BAND</a></li>
<li><a href="#">TOUR</a></li>
<li><a href="#">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Maxime vitae nostrum magni tempora repellendus tenetur asperiores mollitia dignissimos libero hic, doloribus, exercitationem consectetur quas incidunt fugit perferendis fuga! Sint, eaque.</p>
</div>
</body>
</html>
Wie gesagt u i verwendet, es aber es versäumt –