왼쪽, 중앙 또는 오른쪽 정렬 항목이있는 부트 스트랩 NavBar
에서 부트 스트랩 , 오른쪽의 중앙에 왼쪽 메뉴 항목에 로고 A를 가지고 탐색 모음 및 로고 B를 생성 할 수있는 가장 플랫폼 친화적 인 방법은 무엇입니까?
여기까지 내가 시도한 것이 있는데, 로고 A가 왼쪽에 있고 왼쪽에 로고 옆의 메뉴 항목이 있고 오른쪽에 로고 B가 있도록 정렬되었습니다.
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>
<li><a href="#about">Menu Item 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
</ul>
</div>
</div>
</div>
2019 년 업데이트
부트 스트랩 4
Bootstrap 4에 flexbox가 있으므로 Navbar 정렬이 훨씬 쉽습니다. 다음은 Bootstrap 4 Navbar의 왼쪽 , 오른쪽 및 가운데 에 대한 업데이트 된 예 와 여기에 설명 된 다른 여러 정렬 시나리오 입니다.
인 flexbox , 자동 마진 및 주문 유틸리티 클래스는 필요에 따라 Navbar의 내용을 정렬하는 데 사용할 수 있습니다. 대형 화면과 모바일 / 축소 된보기 모두에서 Navbar 항목 (브랜드, 링크, 토글)의 순서 및 정렬을 포함하여 고려해야 할 사항이 많이 있습니다. Navbar에 그리드 클래스 (행, 콜)를 사용하지 마십시오 .
다양한 예가 있습니다 ...
왼쪽, 중앙 (브랜드) 및 오른쪽 링크 :
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Left</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</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" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#">Navbar 2</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/qhaBrcWp3v
중앙 링크와 오버레이 로고 이미지가있는 다른 BS4 Navbar 옵션 :
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
<ul class="navbar-nav ml-auto text-center">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="mx-auto my-2 order-0 order-md-1 position-relative">
<a class="mx-auto" href="#">
<img src="//placehold.it/120/ccff00" class="rounded-circle">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
또는 다음의 다른 Bootstrap 4 정렬 시나리오 :
더 많은 부트 스트랩 4 예제 :
모바일의 왼쪽 토글, 브랜드 오른쪽
센터 브랜드 및 모바일
오른쪽의 링크 바탕 화면의 링크, 모바일
왼쪽 링크 및 토글의 중심 링크, 센터 브랜드, 오른쪽 검색
참고 항목 : Bootstrap 4 탐색 메뉴 항목을
오른쪽에 맞 춥니 다 Bootstrap 4 탐색 메뉴 오른쪽에 모바일에서 접히지 않는 버튼에 맞 춥니 다
Bootstrap 4 Navbar의 요소 가운데
부트 스트랩 3
옵션 1- 왼쪽 / 오른쪽 탐색 링크가있는 브랜드 센터 :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
</nav>
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
옵션 2- 왼쪽, 중앙 및 오른쪽 탐색 링크 :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
<li><a href="#">Center</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Right</a></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
http://www.bootply.com/SGYC6BWeBK
옵션 3- 브랜드와 링크 모두 중앙에
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
@media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://www.codeply.com/go/1lrdvNH9GI
더 많은 예 :
3.x의 경우 탐색 조정 : 부트 스트랩 센터 탐색 모음도 참조하십시오.
부트 스트랩의 중앙 Navbar
Bootstrap 4 네비게이션 바 항목을 오른쪽에 정렬
비슷한 (왼쪽, 가운데 및 오른쪽 정렬 항목)이 필요했지만 가운데 항목을 활성으로 표시하는 기능이 있습니다. 나를 위해 일한 것은 다음과 같습니다.
http://www.bootply.com/CSI2KcCoEM
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="#">Left 1</a></li>
<li class="navbar-left"><a href="#">Left 2</a></li>
<li class="active"><a href="#">Center 1</a></li>
<li><a href="#">Center 2</a></li>
<li><a href="#">Center 3</a></li>
<li class="navbar-right"><a href="#">Right 1</a></li>
<li class="navbar-right"><a href="#">Right 2</a></li>
</ul>
</div>
</nav>
CSS :
@media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
부트 스트랩 4 (알파 6 기준)
Navbar는 flexbox로 제작되었습니다! float 대신 flexbox 및 margin 유틸리티가 필요합니다.
div justify-content-end에서 올바른 정렬 사용 collapse:
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
전체 예는 다음과 같습니다. https://jsbin.com/kemawa/edit?output
부트 스트랩 4
navBars 항목을 정렬하는 방법에는 여러 가지가 있습니다.
왼쪽 정렬 
class = "navbar-nav mr-auto "
오른쪽 맞춤 
class = "navbar-nav ml-auto "
중심 정렬 
class = "navbar-nav mx-auto "
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>
내 머리를, 아 내 대답을 다시 읽고 OP는 왼쪽에 하나는 오른쪽에 두 개의 로고가 있고 오른쪽에는 가운데 메뉴가 있고 다른 방법은 없다는 것을 깨달았습니다.
이는 로고에 Bootstrap의 "navbar-right"및 "navbar-left"를 사용하고 UL의 "navbar-nav"대신 "nav-justified"를 사용하여 HTML에서 엄격하게 수행 할 수 있습니다. 추가 CSS가 필요하지 않습니다 (navs-collapse 토글을 xs 뷰포트의 중앙에 배치하지 않으려는 경우 비트를 재정의해야하지만 사용자에게 맡기십시오).
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>
</div>
<div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li><a href="#">home</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</nav>
Bootply : http://www.bootply.com/W6uB8YfKxm
여기에 "브랜드"를 맞추려고 노력한 사람들에게는 저의 오래된 대답이 있습니다 :
나는이 스레드가 조금 오래되었다는 것을 알고 있지만이 작업을 할 때 내 결과를 게시합니다. tomaszbak이 붕괴 된 이후 skelly의 대답을 바탕으로 솔루션을 결정하기로 결정했습니다. 먼저 "navbar-center"를 만들고 CSS의 일반 navbar에 대해 float를 해제했습니다.
.navbar-center
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-brand{
float:none;
}
그러나 skelly의 대답에 대한 문제는 실제로 브랜드 이름이 길거나 브랜드에 이미지를 사용하려는 경우 sm 뷰포트에 도달하면 절대 위치로 인해 겹칠 수 있으며 주석 작성자가 xs 뷰포트에 도달하면 토글 스위치가 끊어집니다 (Z 위치 지정을 사용하지 않는 한 실제로 걱정할 필요는 없습니다).
그래서 내가 한 것은 부트 스트랩 응답 유틸리티 를 사용하여 여러 버전의 브랜드 블록을 만드는 것입니다.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
<li><a href="#">Left</a></li>
<li><a href="#about">Left</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
<li><a href="#about">Right</a></li>
<li><a href="#contact">Right</a></li>
</ul>
</div>
이제 lg 및 md 뷰포트는 왼쪽과 오른쪽에 링크가있는 브랜드 중심에 있습니다 .SM 뷰포트에 도달하면 링크가 다음 줄로 드롭되어 브랜드와 겹치지 않으며 마지막으로 xs에 있습니다 축소 된 뷰포트를 뷰포트하면 토글을 사용할 수 있습니다. navbar-brand와 함께 사용하면이 단계를 한 단계 더 나아가 navbar-right 및 navbar-left에 대한 미디어 쿼리를 수정할 수 있습니다 .SM 뷰포트에서 링크가 모두 중심에 있지만 수의 시간을 갖지 않도록하십시오.
내 이전 bootply를 확인할 수 있습니다 : www.bootply.com/n3PXXropP3
나는 3 개의 브랜드를 갖는 것이 "z"만큼 번거로울 지 모르지만 반응 형 디자인의 세계에서이 솔루션은 내 스타일에 더 잘 어울린다고 생각합니다.
왼쪽, 가운데 및 오른쪽 항목의 내용에 따라 다음이 더 나은 솔루션이라는 것을 알았습니다. 여백이없는 너비 100 %는 div가 겹치게하여 앵커 태그가 올바르게 작동하지 못하게하는 것입니다. 즉, z- 색인을 지저분하게 사용하지 않습니다.
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
margin: auto;
margin-left: 48%;
}
이것은 오래된 질문이지만 부트 스트랩 github 페이지에서 바로 공유 할 수있는 대체 솔루션을 찾았습니다. 설명서가 업데이트되지 않았으며 약간 다른 질문에도 불구하고 동일한 솔루션을 요청하는 다른 질문이 있습니다. 이 솔루션은 귀하의 경우에만 적용되는 것이 아니라 <div class="container">바로 솔루션이 제공 <nav class="navbar navbar-default navbar-fixed-top">되지만 <div class="container-fluid"필요에 따라 교체 될 수 있습니다 .
<!DOCTYPE html>
<html>
<head>
<title>Navbar right padding broken </title>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<a href="#/" class="navbar-brand">Hello</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="btn-group navbar-btn" role="group" aria-label="...">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
</div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
이 페이지의 바이올린에서 해결책을 찾았습니다 : https://github.com/twbs/bootstrap/issues/18362
V3에서는 수정되지 않음으로 표시됩니다.
<div class="d-flex justify-content-start">hello</div>
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>
위의 구분에 따라 가운데, 오른쪽 또는 왼쪽으로 필드를 배치하십시오.
가장 간단한 해결책 :
그냥 분할 navbar열에 : 예를 들어, 당신이 모든 것을 24 개 컬럼이있는 경우, (12)은 비어가는 12은 네비게이션 바에을 contrain 위하여려고하고있다 :
<nav class="navbar navbar-default">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-12">
<ul class="nav navbar-nav" align="center">
<li><a href="#">Home</a></li>
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
</ul>
</div>
</div>
</nav>
'development' 카테고리의 다른 글
| 선택 요소를 각도로 객체에 바인딩 (0) | 2020.03.01 |
|---|---|
| 외래 키를 무시하고 MySQL DROP 모든 테이블 (0) | 2020.03.01 |
| 포크를 청소하고 업스트림에서 다시 시작하십시오. (0) | 2020.03.01 |
| Vim에서 새 파일로 저장하고 원본 파일로 작업하는 방법은 무엇입니까? (0) | 2020.03.01 |
| GROUP BY를 사용하여 SQL Server에서 문자열을 연결하는 방법은 무엇입니까? (0) | 2020.03.01 |