0
내 게시물을 확인해 주셔서 감사합니다. 처음으로 도움을 청합니다.부트 스트랩 3 내비게이션 내의 요소 정렬에 어려움이 있습니다
내 문제는 내가 시도한 것에 상관없이 내 탐색기 내에 요소를 가운데에 배치 할 수 없다는 것입니다.
여기 내 코드가 내놓은 바가 있습니다.
여기에 내가 뭘하고 싶은거야.
그래서 기본적으로, 나뿐만 아니라 페이지의 오른쪽에 중간 col-sm-8 & col-sm-2의 내용을 중심 싶습니다.
내 HTML은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Bootstrap jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Bootstrap Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<title>Working Title</title>
</head>
<body>
<!-- The Navbar & row-->
<nav class="navbar navbar-inverse row">
<div class="container-fluid">
<!-- The logo Img. -->
<div class="col-sm-2 L-sm-2">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="Img/logo.jpg" style=""></a>
</div>
</div>
<!-- Begin Page Links. This can change the text size also. -->
<ul class="nav navbar-nav col-sm-8 PageLinks">
<!-- Play! -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Play! <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PvE</a></li>
<li><a href="#">PvP</a></li>
</ul>
</li>
<!-- About -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">The Game</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Monster Manual</a></li>
</ul>
</li>
<!-- Forum -->
<li><a href="#">Forum</a></li>
<!-- Statistics -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Statistics <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">General</a></li>
<li><a href="#">PvE</a></li>
<li><a href="#">PvP</a></li>
</ul>
</li>
<!-- Armory -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Armory <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PC Armory</a></li>
<li><a href="#">PC Builder</a></li>
</ul>
</li>
<!-- Help! -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Help <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
<!-- The sign up/sign in stuff. -->
<div class="nav navbar-nav navbar-right R-sm-2 col-sm-2">
<ul class="">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li><br>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
</ul>
</div>
</div>
</nav>
은 여기 내 CSS
* {
/* Makes sure that the padding and border are included in the total width and height of the elements in the Grid. */
box-sizing: border-box;
}
/* Setting the heignt for the logo in the nav bar. */
nav a img {
max-height: 100px;
width: auto;
}
/* Setting the height for the columns in the nav. */
nav .col-sm-2, .col-sm-8{
height: 140px;
}
/* Setting the navbar height & the opacity */
.navbar{
height: 140px;
opacity: .9;
}
/* Setting the left border for the Sign up/Sign in area. */
.R-sm-2{
border-left: 2px solid white;
line-height: 3.3;
}
/* Setting the left border for the Sign up/Sign in area. */
.L-sm-2{
border-right: 2px solid white;
}
.PageLinks{
}
내가 어떤 도움을 주셔서 감사합니다입니다!
디버깅 도움말 ("이 코드가 작동하지 않는 이유는 무엇입니까?)"에는 원하는 동작, 특정 문제 또는 오류 및 질문 자체에서 재현하는 데 필요한 가장 짧은 코드가 포함되어야합니다. 분명한 문제 설명이없는 질문은 다른 독자에게 유용하지 않습니다. 참조 : [최소의 완전하고 검증 가능한 예제를 만드는 방법] (https://stackoverflow.com/help/mcve) –