programing

부트스트랩은 나비 막대 항목을 오른쪽으로 정렬합니다.

abcjava 2023. 9. 8. 21:04
반응형

부트스트랩은 나비 막대 항목을 오른쪽으로 정렬합니다.

탐색 막대 항목을 오른쪽으로 정렬하려면 어떻게 해야 합니까?

로그인을 하고 오른쪽으로 등록하고 싶습니다.하지만 내가 시도하는 모든 것들이 효과가 없는 것 같습니다.

Picture of Navbar

이것이 지금까지 제가 시도한 것입니다.

  • <div> <ul>을다다ehteb:.. .style="float: right"
  • <div> <ul>을다다ehteb:.. .style="text-align: right"
  • 에 그 두 .<li>꼬리표들
  • 을 다시 해 보았습니다.!importantd
  • 변경되었다.nav-itemnav-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>

부트스트랩 5 Navbar 콘텐츠 오른쪽 정렬


부트스트랩 4 (원답)

부트스트랩에는 나비 막대 항목을 정렬하는 여러 가지 방법있습니다.float-right. navbar는 navbar 입니다.flexbox.

을 사용할 수 .mr-auto1일(왼쪽) 자동 우회전 여유도navbar-nav. 아니면.ml-auto2일 사용가능(오른쪽)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-navs,, 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 밖에 남아 있습니다.

항상 보이는 오른쪽 맞춤 버튼

enter image description here

enter image description here

관련:왼쪽, 가운데 또는 오른쪽 정렬된 항목으로 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-automl-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-autoul:

<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에서 약간의 변화가 있습니다.탐색 막대를 오른쪽으로 정렬하려면 두 번만 변경하면 됩니다.다음과 같습니다.

  1. 인에navbar-nav addw-100~하듯이navbar-nav w-100㎛ 100㎛로
  2. 인에nav-item dropdown addml-auto~하듯이nav-item dropdown ml-auto자동으로 마진을 남깁니다.

이해가 안 되셨다면 제가 첨부한 이미지를 참고해주시기 바랍니다.

코드펜 링크

enter image description here

풀소스코드

<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>

위의 답변들은 놀랍게도 저에게 효과가 없었기 때문에 여기 제 접근 방법이 있습니다.로그인탐색 모음 항목을 오른쪽으로 정렬하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다.

  1. pull-right: 로그인을 위해 순서가 없는 목록 태그를 수정하고 다음과 같이 등록합니다.

    <ul class="navbar-nav pull-right">

  2. 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

반응형