부트스트랩 네브바 양쪽정렬

부트스트랩 네브바 양쪽정렬

QA

부트스트랩 네브바 양쪽정렬

본문

부트스트랩으로 네브바 만들기 연습하다가, 양쪽정렬되는 메뉴바를 만들고 싶었는데 쉽지가 안더라구요...질문을 올렸는데 마젠토님께서 알려주셔서 잘 성공했습니다. 감사합니다.

그런데  메뉴바가 양쪽정렬은 됐는데, 스마트폰 크기에서 메뉴가 세로로 정렬되지 않고 가로로 예쁘지 않게 정렬되었습니다.(아래그림)

3732440436_1551315871.6332.png

그래서 CSS를 다음과 같이 수정했습니다.

@media (max-width: 768px) {
  .navbar-nav>li { display: inline; }
  .menu ul li { border-right: none; }
  .menu ul li:nth-child(1){ border-left: none; }
}

이렇게 수정했더니 스마트폰 크기화면에서 메뉴가 세로로 나오는데요...

3732440436_1551316040.2537.png

이게 맞는 방법인지 궁금합니다.

 

원본소스는

=======================================

<style>
.menu ul li { border-right: 1px solid #dbdbdb; }
.menu ul li:nth-child(1){ border-left: 1px solid #dbdbdb; }

/* ul li 리스트 양쪽정렬 */
.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; }
@media (max-width: 768px) {
  .navbar-nav>li { display: inline; }
  .menu ul li { border-right: none; }
  .menu ul li:nth-child(1){ border-left: none; }
}
/* ul li 리스트 양쪽정렬 */
/* 로고 보이기 */
@media (min-width: 768px) {
  .navbar-brand{ display: none; }
}
/* 로고 보이기 */

</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>
        <a class="navbar-brand" href="#">Brand</a>
      </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="#">아이와 함께 갈만한 곳</a></li>
          <li><a href="#">체험하기 좋은 곳</a></li>
          <li><a href="#">캠핑장만 보고 싶다면</a></li>
          <li><a href="#">애견 입장이 가능한 곳</a></li>
          <li><a href="#">축제하는 곳</a></li>
          <li><a href="#">숙박업소</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div>
  </div><!-- /.container-fluid -->
</nav>

==============================================

이 질문에 댓글 쓰기 :

답변 1

제가 주로 커스터마이징 된 부트스트랩만 사용해서 그런진 몰라도 MD부트스트랩은 사이드 네비게이션따로 pc네비게이션 따로 만들긴하는데 pc,모바일 네비게이션을 css만 컨트롤해서 1개로 쓰신다면 위와같은 방법이 맞긴합니다. 

.navbar-nav>li { display: inline; }보단 block으로 해주시구요..

다만 고려해야될점은 pc에선 메뉴를 감싸고있는애들이 전부 보이는데 width값을 줄이면 숨겨지겟죠 그리고 햄버거를 눌렀을때 펼쳐질텐데 햄버거버튼으로 모바일에서 네비게이션을 닫고 다시 창 크기를 늘렸을때 메뉴들이 display block이 되는지도 체크해보셔야할거같아요. 

 

뭐 부트스트랩이 그런점까지 고려해서 만들어져있긴하겠지만 또 모르니깐요..

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

회원로그인

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