0
私はtwitter Bootstrapに絶対配置されたnavbarを使用していますが、navbar項目でmyタグ内の.pull-rightクラスを使用すると、navbar項目は左側にとどまります。 floatを使ってみました。テキスト整列：右。それらは機能しませんでした。ナビゲーションバーの絶対位置がこの動作に影響しますか？ navbarアイテムをバナーの右側に移動させるにはどうすればよいですか？ブートストラップナビを右に移動するには？
.wrapper {
position: relative;
}
#banner {
height: 50vh;
width: 100vw;
position: relative;
}
#responsive-nav {
background-color: transparent;
position: absolute;
z-index: 2;
}
#logo {
position: absolute;
top: 15px;
left: 60px;
z-index: 1;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-nav">
<ul class="nav navbar-nav pull-right">
<li class="nav-item">
<a href="#about">Home</a>
</li>
<li class="nav-item">
<a href="#work">Projects</a>
</li>
<li class="nav-item">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="wrapper">
<img class="img-responsive" id="logo" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2ZS1qSS1wOGJCVzg=w1046-h653-iv1">
<img class="img-responsive" id="banner" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2SDRjaVpyY3FITFk=w1366-h653-iv1">
</div>
</div>
</div>
</nav>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
質問に直接関連コードを挿入してください。 – Luuklag
私は先に進み、質問を編集しました。コードペンのコメントを削除しました。たくさんのコードを追加しない方が現実的な時がありますか？私はコードペンのリンクは、このページではあまり混乱させないものになると思いましたか？将来の参照のために、すべてのコードを追加する方が良いでしょうか？ –
あなたの質問には、このサイトの他の質問と比較してわずかなコードしか含まれていません。しかし、常にコードをMVCEに減らすことをお勧めします。 – Luuklag