부트스트랩 템플릿에서 모바일 버전은 어떻게 수정해야 할까요?


안녕하세요. 학원에서 백엔드 교육을 마치고

혼자 개인프로젝트를 진행하고 있는 학생입니다.

처음에는 프론트엔드를 좀 독학 배워서 CSS를 활용해보려 했는데

눈이 돌아가더라고요;;

그래서 bootstrap 템플릿을 받아서 하려합니다. 4가 최신버전이라 4를 기준으로 하고 있습니다.

근데 하다보니 역시나 손대고 싶은 부분이 생기더라고요.

이미지

템플릿을 따와서 조금 수정한 헤더 부분입니다.

이 부분을 모바일 버전으로 바꿔보면

이미지

이렇게 됩니다. 문제는 이게 너무 보기 안좋아요..

먼저 resiger 부분을 login 버튼 옆으로 넣고싶습니다.

그리고 마지막 드랍액션 부분을 토글을 여는 버튼 옆에 두고싶거든요

근데 PC버전에서는 그냥 수정하고 손대면 금방 고쳐지는데

모바일 버전에서는 어떻게 손을 대야할지 감이 안잡힙니다.

검색을 해봐도 잘 안나오고..

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div id="app" class="container">
        <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 id="navbarNavDropdown" class="navbar-collapse collapse">
            <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="#">Pricing</a>
                </li>
            </ul>

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="{{ url('/login') }}"><i class="fas fa-sign-in-alt"></i> Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url('/register') }}"><i class="fas far fa-user"></i> Register</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

현재 제 nav 코드입니다. css 같은 건 아직 만들지 않았습니다.

혹시 도움을 주실 수 있으시다면 답변을 부탁드리겠습니다.

읽어주셔서 감사합니다 ㅠ

  • 2018년 02월 08일에 작성됨

조회수 59


20180214banner blockchain

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close