私は学校でプロジェクトを作っています。私はBootstrap 4を使用しています。ブートストラップ4 navbar over mobile on mobile
私はnavbarの真ん中にイメージを置いて私のnavbarブランドを持っています。しかし、私が小さな画面に切り替えると、navbar項目のいくつかがnavbarの下に移動します。また、カルーセルとnavbarの間にもスペースができます。
私はそれがnavbarブランドイメージの「絶対的な」位置のためであると考えます。
jsfiddle:jsfiddle(dot)net/zdu9jv99/3 /なぜ完全には動作しないのか分かりません..... (2つ以上のリンクを投稿できません私は(ドット)をしなければならない。)
これは小さなディスプレイで見えるものです。 Image that shows the overlapping これはどのように見えますか。 This is how it looks on bigger screens は、ここに私のHTMLとCSSです:
<!DOCTYPE html>
<html lang="sv">
<head>
<title>Barber Shop</title>
<meta charset="utf-8">
<!-- Icon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Font-Awesome Core CSS -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<!-- Navigation -->
<nav class="navbar navbar-dark bg-inverse navbar-static-top navbar-full" style="background-color: #d8c387 !important;">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="index.html"><i class="fa fa-home icon-padding" aria-hidden="true"></i>Hem</a></li>
<li class="nav-item"><a class="nav-link" href="hittafrisor.html"><i class="fa fa-map-marker icon-padding" aria-hidden="true"></i>Hitta frisör</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-picture-o icon-padding" aria-hidden="true"></i>Galleri</a></li>
</ul>
</div>
<div class="col-md-2">
<div class="navbar-brand">
<a class="white-circle" href="index.html">
<img class="img-fluid" src="assets/images/barber-logo.png" alt="Logo">
</a>
</div>
</div>
<div class="col-md-6">
<ul class="nav navbar-nav float-md-right">
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-info icon-padding" aria-hidden="true"></i>Om oss</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-phone icon-padding" aria-hidden="true"></i>Kontakt</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<main>
CSS:あなたは、全体のことを見てみたい場合は
/* NAVBAR */
.navbar {
height: 58px;
z-index: 2 !important;
}
.navbar-brand {
display: inline-block;
float: none;
padding: 0;
margin: 0 !important;
overflow: visible;
}
.navbar-brand img {
z-index: 3 !important;
}
.navbar-brand .white-circle {
display: block;
width: 161px;
height: 10px;
border-radius: 50%;
position: absolute;
}
.navbar {
text-align: center;
}
.nav-link {
color: #741833 !important;
}
/* NAVBAR FONT SIZE */
.nav a{
font-size: 17px;
}
私はまた、サイトとプロジェクトをアップロードしています。あなたが他の意見を持っていたり、私が批判を解放したと感じたら、私はいくつかの間違いを犯したと確信しています。サイトはcpt-keyhole.seです(奇妙な名前を知っています)
これはたぶん簡単なことですが、私が見逃したり誤解したりしているので、助けていただければ幸いです。御時間ありがとうございます!
これをhttps://jsfiddle.net/に追加して、コードを簡単に編集することができます。 – DokiCRO
小さな解像度では、折りたたみメニューにナビゲーションバーを追加する必要があります。 – KujAslani