부트스트랩 네브바 양쪽정렬
본문
부트스트랩으로 네브바 만들기 연습하다가, 양쪽정렬되는 메뉴바를 만들고 싶었는데 쉽지가 안더라구요...질문을 올렸는데 마젠토님께서 알려주셔서 잘 성공했습니다. 감사합니다.
그런데 메뉴바가 양쪽정렬은 됐는데, 스마트폰 크기에서 메뉴가 세로로 정렬되지 않고 가로로 예쁘지 않게 정렬되었습니다.(아래그림)
그래서 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; }
}
이렇게 수정했더니 스마트폰 크기화면에서 메뉴가 세로로 나오는데요...
이게 맞는 방법인지 궁금합니다.
원본소스는
=======================================
<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이 되는지도 체크해보셔야할거같아요.
뭐 부트스트랩이 그런점까지 고려해서 만들어져있긴하겠지만 또 모르니깐요..
