중앙 컨텐츠를 대응하는 부트스트랩 탐색 모음에 배치
부트스트랩 탐색 모음에서 콘텐츠를 중앙에 배치하는 데 문제가 있습니다.저는 3번 부트스트랩을 사용하고 있습니다.나는 많은 게시물을 읽었지만, 사용된 CSS나 메소드는 내 코드에서 작동하지 않을 것입니다!저는 정말 답답해서, 이것이 제 마지막 선택입니다.어떤 도움이라도 주시면 감사하겠습니다!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
https://jsfiddle.net/amk07fb3/
이것이 당신이 찾고 있는 것 같습니다.을 해야 합니다.float: left내부 탐색에서 중앙으로 이동하여 인라인 블록으로 만듭니다.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
편집: 탐색이 축소되지 않은 경우에만 이 효과를 발생시키려면 적절한 미디어 쿼리로 둘러쌉니다.
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
원래 게시물은 붕괴된 나비바의 중심을 잡는 방법을 묻는 것이었습니다.일반적인 탐색 모음에서 요소의 중심을 맞추려면 다음을 시도하십시오.
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
컨테이너 안에 navbar를 둘 필요가 없고 CSS나 부트스트랩 오버라이드가 필요 없는 레이아웃에 대해 이를 수행하는 또 다른 방법이 있습니다.
부트스트랩으로 디브를 배치하기만 하면 됩니다.container는 navbarnavbar .그러면 탐색 모음 내부의 링크가 중앙에 배치됩니다.
<nav class="navbar navbar-default">
<!-- here's where you put the container tag -->
<div class="container">
<div class="navbar-header">
<!-- header and collapsed icon here -->
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- links here -->
</ul>
</div>
</div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->
본문 내용을 중앙 탐색 모음에 정렬하려면 해당 본문 내용도 부트스트랩에 넣습니다.container꼬리표를 달다
<div class="container">
<! -- body content here -->
</div>
할 수 것은 . (를 Navbar .)container을 할, 중앙에 입니다.) 그럼에도 불구하고, 만약 당신이 그것을 할 수 있다면, 그것은 당신의 navbar 링크와 바디의 중심을 잡는 쉬운 방법입니다.
결과는 JSFidle 전체 페이지 http://jsfiddle.net/bdd9U/231/embedded/result/ 에서 확인할 수 있습니다.
출처: http://jsfiddle.net/bdd9U/229/
부트스트랩 4의 경우:
그냥 사용하기
<ul class="navbar-nav mx-auto">
mx-auto가 그 일을 할 것입니다.
부트스트랩 5(2021년 업데이트)
Navbar는 여전히 부트스트랩 5에 기반을 둔 플렉스박스이며 콘텐츠 센터링은 부트스트랩 4와 동일하게 작동합니다.예제
부트스트랩 4
Navbar 콘텐츠의 중심을 잡는 것은 Bootstrap 4이며, 여기에서 설명하는 많은 중심 시나리오를 볼 수 있습니다. https://stackoverflow.com/a/20362024/171456
부트스트랩 3
아직 답변이 되지 않은 것으로 보이는 또 다른 시나리오는 브랜드와 navbar 링크를 모두 집중시키는 것입니다.여기 해결책이 있습니다.
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
참고:왼쪽, 가운데 또는 오른쪽 정렬 항목이 있는 부트스트랩 NavBar
이 코드는 나에게 효과가 있었습니다.
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
부트스트랩 공식 사이트에서 (그리고, 거의, 에릭 S처럼).불링톤이 말했습니다.
https://getbootstrap.com/components/ #navbar-default
navbar의 예는 다음과 같습니다.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
...etc
내가 한 일은 내비게이션의 중심을 잡는 것입니다.
<div class="container-fluid" id="nav_center">
CSS:
@media (min-width:768px) { /* don't break navbar on small screen */
#nav_center {
width: 700px /* need to found your width according to your entry*/
}
}
class="dll" 및 navbar-right 또는 left로 작업합니다. 물론 클래스별로 id를 바꿀 수 있습니다. :D
이 모든 답변은 부트스트랩 위에 있는 맞춤형 CSS를 포함하는 것 같습니다.제가 제공하는 답변은 부트스트랩만 활용하기 때문에 커스터마이징을 제한하고자 하는 분들에게 도움이 되었으면 합니다.
이 테스트는 Bootstrap V3.3.7을 사용하여 수행되었습니다.
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-5 col-xs-2 text-center">
<p>I am centered text<p>
</div>
<div class="col-xs-5"></div>
</div>
</div>
</footer>
이것은 효과가 있을 것입니다.
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
다음 HTML 사용
<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li><h5><a href="#/">Home</a></h5></li>
<li>|</li>
<li><h5><a href="#products">About</a></h5></li>
<li>|</li>
<li><h5><a href="#">Contacts</a></h5></li>
<li>|</li>
<li><h5><a href="#cart">Cart</a></h5></li>
</ul>
</div><!-- /.container-fluid -->
</nav>
그리고 css
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-default {
background-color: white;
border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
background-color:white;
}
필요에 따라 수정
다음과 같이 BootStrap의 V4가 중앙(vmx-content-center) 및 오른쪽 정렬(vmx-content-end)을 추가하고 있습니다. https://v4-alpha.getbootstrap.com/components/navs/ #content-alignment
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
플렉스를 적용하기 때문입니다. 이 코드를 사용할 수 있습니다.
@media (min-width: 992px){
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
justify-content: center;
}
제 경우에는 제대로 작동했습니다.
언급URL : https://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar
'source' 카테고리의 다른 글
| "치명적 오류: 다시 선언할 수 없음" (0) | 2023.07.28 |
|---|---|
| 목록 이해는 이해 범위 이후에도 이름을 다시 바인딩합니다.이게 맞나 (0) | 2023.07.28 |
| PowerShell에서 절대 경로를 상대 경로로 변환하는 방법은 무엇입니까? (0) | 2023.07.28 |
| 감지되지 않은 오류:'AppModule' 모듈에서 예기치 않은 모듈 'FormsModule'을(를) 선언했습니다.@Pipe/@Directive/@Component 주석을 추가하십시오. (0) | 2023.07.28 |
| 데이터를 사용하여 열의 데이터 유형을 변경하는 방법 (0) | 2023.07.28 |