부트스트랩 메뉴 양쪽정렬방법

부트스트랩 메뉴 양쪽정렬방법

QA

부트스트랩 메뉴 양쪽정렬방법

본문

부트스트랩으로 메뉴를 만들려고 하다보니,,,,가운데 양쪽정렬을 하고 싶은데요.

어떻게하면 메뉴를 왼쪽, 오른쪽 정렬이 아닌, 가운데 양쪽 정렬(justified)로 하려고 하는데...

이리저리 해봐도 안되서 고수님들께 문의드립니다.

--------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>

    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
.menu ul li {border-right: 1px solid #dbdbdb;}
.menu ul li:nth-child(1){border-left: 1px solid #dbdbdb;}
</style>

  </head>
  <body>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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 menu" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav text-center">
          <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><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </div><!-- /.container-fluid -->
</nav>
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </body>
</html>

--------------------------------------------------------------------

고수님들의 조언 부탁드립니다.

이 질문에 댓글 쓰기 :

답변 2

    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
    .navbar-nav>li {
        display: table-cell;
        float: none;
        text-align: center;
    }

로 해보세요..  bootstrap 4에서는 nav-justified라고 있습니다.

마젠토님아...하나만 더 여쭤볼게요...알려주신데로 했더니 잘되는데요...화면을 줄였을때 메뉴들이 가로로나는데요....화면을 스마트폰 크기로 줄였을때 메뉴들이 세로로 나오게 하는 방법을 아시면 좀 알려주세요....죄송합니다.

가운데 양쪽정렬이라는게 이해가되지않습니다. . .

답변을 작성하시기 전에 로그인 해주세요.
전체 205
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT