부트스트랩 네브바 양쪽정렬 채택완료
부트스트랩으로 네브바 만들기 연습하다가, 양쪽정렬되는 메뉴바를 만들고 싶었는데 쉽지가 안더라구요...질문을 올렸는데 마젠토님께서 알려주셔서 잘 성공했습니다. 감사합니다.
그런데 메뉴바가 양쪽정렬은 됐는데, 스마트폰 크기에서 메뉴가 세로로 정렬되지 않고 가로로 예쁘지 않게 정렬되었습니다.(아래그림)
그래서 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; } }
이렇게 수정했더니 스마트폰 크기화면에서 메뉴가 세로로 나오는데요...
이게 맞는 방법인지 궁금합니다.
원본소스는
=======================================
==============================================
답변 1개
제가 주로 커스터마이징 된 부트스트랩만 사용해서 그런진 몰라도 MD부트스트랩은 사이드 네비게이션따로 pc네비게이션 따로 만들긴하는데 pc,모바일 네비게이션을 css만 컨트롤해서 1개로 쓰신다면 위와같은 방법이 맞긴합니다.
.navbar-nav>li { display: inline; }보단 block으로 해주시구요..
다만 고려해야될점은 pc에선 메뉴를 감싸고있는애들이 전부 보이는데 width값을 줄이면 숨겨지겟죠 그리고 햄버거를 눌렀을때 펼쳐질텐데 햄버거버튼으로 모바일에서 네비게이션을 닫고 다시 창 크기를 늘렸을때 메뉴들이 display block이 되는지도 체크해보셔야할거같아요.
뭐 부트스트랩이 그런점까지 고려해서 만들어져있긴하겠지만 또 모르니깐요..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인