부트스트랩은 나비 막대 항목을 오른쪽으로 정렬합니다.
탐색 막대 항목을 오른쪽으로 정렬하려면 어떻게 해야 합니까?
로그인을 하고 오른쪽으로 등록하고 싶습니다.하지만 내가 시도하는 모든 것들이 효과가 없는 것 같습니다.
이것이 지금까지 제가 시도한 것입니다.
<div>
<ul>
을다다ehteb:.. .style="float: right"
<div>
<ul>
을다다ehteb:.. .style="text-align: right"
- 에 그 두 .
<li>
꼬리표들 - 을 다시 해 보았습니다.
!important
d - 변경되었다.
nav-item
nav-right
<li>
- 가 추가된
pull-sm-right
에 걸맞은<li>
- 가 추가된
align-content-end
에 걸맞은<li>
이게 내 암호입니다.
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav " >
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
@yield('content')
</div>
부트스트랩 5 (2021년 업데이트)
부트스트랩 5(이 질문 참조)에서,ml-auto
다로 되었습니다.ms-auto
할을 start
에 대신에left
. Navbar는 여전히 flexbox를 기반으로 하므로 자동 여백 또는 flexbox 유틸리티 클래스는 Navbar 컨텐츠를 정렬하는 데 여전히 사용됩니다.
를 들어, , 을 합니다.me-auto
...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
부트스트랩 4 (원답)
부트스트랩에는 나비 막대 항목을 정렬하는 여러 가지 방법이 있습니다.float-right
. navbar는 navbar 입니다.flexbox
.
을 사용할 수 .mr-auto
1일(왼쪽) 자동 우회전 여유도navbar-nav
. 아니면.ml-auto
2일 사용가능(오른쪽)navbar-nav
, 아니면 싱글이 있으면.navbar-nav
.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
https://codeply.com/go/P0G393rzfm
플렉스박스 유틸리티도 있습니다.예를 들어 사용하기justify-content-end
축소 메뉴에서:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
2 2 2 navbar-nav
s,, justify-content-between
인에navbar-collapse
의할다수도다수eenodke할r도v-v-
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
부트스트랩 4.0 이상 버전 업데이트
4, 4 ,ml-auto
항목을 오른쪽으로 밀어넣는 작업이 계속됩니다..navbar-toggleable-
으로로 .navbar-expand-*
부트스트랩 4에 대한 navbar right 업데이트
또 다른 자주 발생하는 부트스트랩 4 Navbar 우측 정렬 시나리오는 항상 모든 폭으로 표시되도록 오른쪽에 있는 버튼이 모바일 축소 Nav 밖에 남아 있습니다.
관련:왼쪽, 가운데 또는 오른쪽 정렬된 항목으로 NavBar 부트스트랩
제 경우에는 탐색 버튼/옵션을 한 세트만 원했는데 이렇게 하면 효과가 있습니다.
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign Out</a>
</li>
</ul>
</div>
그래서, 당신은 추가할 것입니다.justify-content-end
까지를 mr-auto
여기 작동 예가 있습니다.
BS4에서 아직도 이 문제로 어려움을 겪고 계신 분들은 아래 코드를 사용해 보십시오.
<ul class="navbar-nav ml-auto">
부트스트랩 4에서
를 으로 하고 navbar 을 으로 하려면 을 합니다 합니다 을 하려면 을 으로 를 으로 mr-auto
ml-auto
<ul class="navbar-nav ml-auto">
Bootsrap 4.0.0-beta.2
에 나와 있는 도 나에게 에 에 게 은 은 게 에 .마지막으로 부트스트랩 사이트에서 해결책을 제공했습니다. 문서가 아닌 페이지 소스 코드를 통해서...
은 을 정렬합니다.navbar-nav
다음합니다:음의을아로다다로아o을의음:eh .ml-md-auto
.
이 코드를 사용하여 항목을 오른쪽으로 이동합니다.
<div class="collapse navbar-collapse justify-content-end">
사용하다ml-auto
에 대신에mr-auto
에를 한 후nav
하다,다ul
추가하기만 하면 됩니다.mr-auto
한ul
:
<ul class="nav navbar-nav mr-auto">
양쪽에 메뉴 목록이 있는 경우 다음과 같은 작업을 수행할 수 있습니다.
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">left 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">left 2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">left disable</a>
</li>
</ul>
(홈) (기능) (가격) 에(가격) 하려면(가격) 으로() 뒤에 홈, 및 nav-brand
두 을 , 에서 .<div>
을 합니다..justify-content-between
:
<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>
에서는 v4를 됩니다.3에서 추가하기만 하면 됩니다.ml-auto
인에<ul class="navbar-nav">
예:<ul class="navbar-nav ml-auto">
플랙스 로우 클래스를 사용합니다.
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
</a>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<ul class="navbar-nav">
<li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
<li><a class="nav-item nav-link" href="#">Doctors</a></li>
<li><a class="nav-item nav-link" href="#">Specialists</a></li>
<li><a class="nav-item nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>
Boost rap 4에서 약간의 변화가 있습니다.탐색 막대를 오른쪽으로 정렬하려면 두 번만 변경하면 됩니다.다음과 같습니다.
- 인에
navbar-nav
addw-100
~하듯이navbar-nav w-100
㎛ 100㎛로 - 인에
nav-item dropdown
addml-auto
~하듯이nav-item dropdown ml-auto
자동으로 마진을 남깁니다.
이해가 안 되셨다면 제가 첨부한 이미지를 참고해주시기 바랍니다.
풀소스코드
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav w-100">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
부트스트랩 4.3.1의 경우 nav-pill을 사용하고 있었는데 이것 외에는 아무것도 작동하지 않았습니다.
<ul class="nav nav-pills justify-content-end ml-auto">
<li ....</li>
</ul>
Bootstrap v5의 경우 오른쪽으로 탐색 옵션이 한 세트만 제공되기를 원했습니다.
그냥 "ms-auto"를 ul에 추가합니다.
도움이 됐어요
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link " aria-current="page" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="services.php" tabindex="-1" aria-disabled="true">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.php">Portfolio</a>
</li>
</ul>
</div>
위의 답변들은 놀랍게도 저에게 효과가 없었기 때문에 여기 제 접근 방법이 있습니다.로그인 및 탐색 모음 항목을 오른쪽으로 정렬하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다.
pull-right: 로그인을 위해 순서가 없는 목록 태그를 수정하고 다음과 같이 등록합니다.
<ul class="navbar-nav pull-right">
navbar-right: 로그인을 위해 순서 없는 목록 태그를 수정하고 다음과 같이 등록합니다.
<ul class="navbar-nav navbar-right">
Angular 4 (v.4.0.0)와 ng-bootstrap (Bootstrap 4)을 실행하고 있습니다.이 코드가 모두 관련이 있는 것은 아니지만 사람들이 무엇이 효과가 있는지 선택하고 선택할 수 있기를 바랍니다.제 항목이 정당화되고 올바르게 붕괴되며 구글(OAuth 사용) 프로필 사진에서 드롭다운을 구현하기 위한 해결책을 찾는 데 시간이 조금 걸렸습니다.
<div id="header" class="header">
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
<span class="navbar-logo-text">Oncoscape</span>
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav float-left">
<a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
<span class="fa fa-dashboard"></span>Dashboard
</a>
<a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
<span class="fa fa-comments"></span>Feedback
</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img *ngIf='user && authenticated' class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
</a>
<div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" (click)="toProfile()">Account</a>
<div class="dropdown-item">
<app-login></app-login>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<router-outlet></router-outlet>
Bootstrap 4 베타의 경우 우측에 정렬된 요소가 있는 navbar 샘플은 다음과 같습니다.
<div id="app" class="container">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
</div>
부트스트랩 플렉스 박스를 사용하면 탐색 요소의 배치 및 정렬을 제어할 수 있습니다.위의 문제에 대해서는 mr-auto를 추가하는 것이 더 나은 해결책입니다.
<div id="app" class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav " >
<li class="nav-item">
<a class="nav-link" href="{{ url('/login') }}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('/register') }}">Register</a>
</li>
</ul>
</nav>
@yield('content')
</div>
다른 배치는 다음을 포함할 수 있습니다.
fixed- top
fixed bottom
sticky-top
BS의 작동 사례v4.0.0-beta.2
:
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricingg</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
container content
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
위의 내용이 모두 실패하면 CSS에서 navbar 클래스에 100% width를 추가했습니다.그때까지 Mr auto는 4.1을 사용하는 이 프로젝트에서 나를 위해 일하지 않았습니다.
하지만 정렬할 nav 항목은 단독으로 정렬할 수 있습니다.
메인 네비 바깥쪽에 두되, 같은 위치에 두십시오.
<ul class="navbar-nav justify-content-end ms-auto"> <li class="nav-item"> <a class="nav-link" href="#" aria-expanded="false">Contact support</a> </li> <li class="nav-item "> <a class="nav-link" href="#" aria-expanded="false">Log in</a> </li> </ul>
사용하다 justify-content-end ms-auto
verndor-prefix.less에서 69행을 찾고 다음과 같이 적습니다.
.panel {
margin-bottom: 20px;
height: 100px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
위보다 훨씬 더 잘 작동하는 버전 4의 getbootstrap 페이지 중 하나에서 복사했습니다.
<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
<li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
<li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
</ul>
</div>
스택 오버플로는 처음이고 프론트엔드 개발은 처음입니다.이것이 저에게 효과가 있었던 것입니다.그래서 목록 항목이 표시되는 것을 원하지 않았습니다.
.hidden {
display:none;
}
#loginButton{
margin-right:2px;
}
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">NavBar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active hidden">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item hidden">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item hidden">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
</form>
</div>
</nav>
언급URL : https://stackoverflow.com/questions/41513463/bootstrap-align-navbar-items-to-the-right
'programing' 카테고리의 다른 글
YamlPropertiesFactoryBean을 사용하여 Spring Framework 4.1을 사용하여 YAML 파일을 로드하는 방법은 무엇입니까? (0) | 2023.09.08 |
---|---|
경고: CSRF 토큰 인증 레일을 확인할 수 없습니다. (0) | 2023.09.08 |
Last not empty cell (column) in the given row; Excel VBA (0) | 2023.09.08 |
f:ajax로 여러 구성요소 렌더링 (0) | 2023.09.08 |
MySQLDump에서 생성된 SQL 파일을 명령 프롬프트를 사용하여 복원하는 방법 (0) | 2023.09.08 |