IT

부트 스트랩 4 네비게이션 바 항목을 오른쪽에 정렬

lottoking 2020. 3. 22. 10:52
반응형

부트 스트랩 4 네비게이션 바 항목을 오른쪽에 정렬

탐색 표시 줄 항목을 오른쪽에 어떻게 정렬합니까?

로그인하고 오른쪽에 등록하고 싶습니다. 그러나 내가 시도하는 모든 것이 작동하지 않는 것 같습니다.

Navbar의 사진

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

  • <div>주위에 <ul>찬사와 함께 :style="float: right"
  • <div>주위에 <ul>찬사와 함께 :style="text-align: right"
  • <li>태그 에서 그 두 가지를 시도
  • !important끝에 추가하여 모든 것을 다시 시도하십시오.
  • 변경 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>

부트 스트랩 4 에는 탐색 모음 항목을 정렬하는 여러 가지 방법이 있습니다 . float-rightnavbar가 now이므로 작동하지 않습니다 flexbox.

1 번째 (왼쪽) mr-auto의 자동 오른쪽 여백에 새 기능 을 사용할 수 있습니다 . 또한 , 온 사용될 수 2 (오른쪽) 당신은 단지 하나가있는 경우, 또는 .navbar-navml-autonavbar-navnavbar-nav

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

http://www.codeply.com/go/P0G393rzfm

flexbox 유틸리티도 있습니다. 이 경우, 당신이 개 가지고 navbar-nav들, 그래서 justify-content-between에서가 navbar-collapse그들 사이에도 공간을 작동합니다,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

Bootstrap 4.0 이상 업데이트

Bootstrap 4 베타 ml-auto부터는 항목을 오른쪽으로 밀기 위해 계속 작동합니다. navbar-toggleable-수업이 바뀌 었다는 것을 명심하십시오.navbar-expand-*

부트 스트랩 4에 대한 업데이트 된 탐색 모음

또 다른 빈번한 Bootstrap 4 Navbar 오른쪽 정렬 시나리오에는 오른쪽에 버튼이 포함되어있어 모바일 축소 탐색 외부에 남아 있으므로 항상 모든 너비로 표시됩니다.

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

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오

관련 : 왼쪽, 가운데 또는 오른쪽으로 정렬 된 항목이있는 부트 스트랩 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-enddiv에 추가 mr-auto하고 목록에서 생략 합니다.

다음은 실제 예 입니다.

BS4 에서이 문제로 여전히 어려움을 겪고있는 사람들은 아래 코드를 시도하십시오. 

<ul class="navbar-nav ml-auto">

부트 스트랩 4

브랜드를 왼쪽에 맞추고 모든 탐색 모음 항목을 오른쪽에 맞추려면 기본값 mr-auto을ml-auto

<ul class="navbar-nav ml-auto">

에 Bootsrap 4.0.0-beta.2, 여기에 나열된 답변 중 어느 것도 나를 위해 일하지 않았습니다. 마지막으로 Bootstrap 사이트는 문서가 아니라 페이지 소스 코드를 통해 솔루션을 제공했습니다 ...

Getbootstrap.com navbar-nav은 다음 클래스의 도움을 받아 오른쪽에 오른쪽 을 맞 춥니 다 ml-md-auto.

justify-content-end를 적용한 후 ml-auto대신에 사용하십시오 .mr-autonavul

의 바로 다음에 왼쪽에 홈, 기능 및 가격을 표시 nav-brand한 다음 오른쪽에 로그인하여 등록한 다음 두 목록을 래핑하여 <div>사용하십시오 .justify-content-between.

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

ul에 mr-auto 클래스를 추가하십시오.

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

flex-row-reverse 클래스를 사용하십시오.

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

항목을 오른쪽으로 이동하려면이 코드를 사용하십시오.

div class="collapse navbar-collapse justify-content-end"

Angular 4 (v.4.0.0) 및 ng-bootstrap (Bootstrap 4)을 실행 중입니다. 이 코드는 모두 관련이있는 것은 아니지만 사람들이 원하는 것을 선택하고 선택할 수 있기를 바랍니다. 상품을 정당화하고 올바르게 축소하고 내 Google (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 베타의 경우 요소가 오른쪽에 정렬 된 샘플 탐색 모음은 다음과 같습니다.

<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 % 너비를 추가했습니다. 그때까지 mr auto는 4.1을 사용 하여이 프로젝트에서 작동하지 않았습니다.

verndor-prefixes.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-4-align-navbar-items-to-the-right

반응형

'IT' 카테고리의 다른 글

SqLite에서 Top 5 레코드를 얻는 방법?  (0) 2020.03.22
매일 오전 2시 30 분에 크론 작업 실행  (0) 2020.03.22
배열에 객체를 추가하는 방법  (0) 2020.03.22
슬라이드 업 / 다운 애니메이션으로보기 표시 및 숨기기  (0) 2020.03.22
SVN이 계속 충돌합니까?  (0) 2020.03.22

'IT'의 다른글

  • 현재글부트 스트랩 4 네비게이션 바 항목을 오른쪽에 정렬

관련글

댓글

티스토리툴바