모바일보기 중에 Navbar 내 로그인 드롭 다운이 이상하게 보입니다.

Question

저는 초보자입니다. 실례합니다.

저는 작업 사이트를 만들고 부트 스트랩을 사용하고 있습니다. 내비게이션 막대에 로그인 드롭 다운이 있습니다. 데스크톱보기에서는 괜찮아 보이지만, 모바일보기의 경우 축소 된 경우 로그인 버튼을 클릭하거나 드롭 다운하면 화면이 거칠어집니다. 그런 다음 navbar 회색 막대가 아래로 뻗어서 모든 모양이 엉망으로 보입니다. 도움!

여기 링크가 있습니다. 다음은

https://web.gettips.com/redesign7/css/styles.css

https://web.gettips.com/redesign7/index.html

는 미디어 쿼리에 대한 코드입니다 :

@charset "UTF-8"; 
/* CSS Document */ 

@media (max-width: 375px) { 
    .title { 
    padding-top: 270px; 
    } 
} 

@media only screen and (max-width: 400px) { 
    .title { 
    padding-top: 0; 
    font-size: 12px; 
    } 
    #toplogin img { 
    width: 60px; 
    height: auto !important; 
    } 
} 

@media only screen and (max-width: 767px) { 
    .footer-bs .footer-nav, 
    .footer-bs .footer-social, 
    .footer-bs .footer-ns { 
    border-left: solid 1px rgba(255, 255, 255, 0.10); 
    } 
    #toplogin img { 
    width: 90px; 
    height: auto !important; 
    } 
} 

@media only screen and (max-width: 773px) { 
    .title { 
    padding-top: 5px; 
    font-size: 15px; 
    } 
    #toplogin img { 
    width: 90px; 
    height: auto !important; 
    } 
} 

@media only screen and (max-width: 1029px) { 
    .title { 
    padding-top: 5px; 
    font-size: 20px; 
    } 
    #toplogin img { 
    width: 100px; 
    height: auto !important; 
    } 
    .panel-heading h1 { 
    font-size: 25px; 
    } 
} 

@media (max-width: 1118px) { 
    .header img { 
    width: 80px; 
    height: auto !important; 
    } 
    .navbar-header { 
    float: none; 
    } 
    .navbar-toggle { 
    display: block; 
    padding: 3px; 
    } 
    .navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
    } 
    .navbar-collapse.collapse { 
    display: none!important; 
    } 
    .navbar-nav { 
    /*  float: none!important; 
*/ 
    margin: 0px -15px; 
    } 
    .navbar-nav>li { 
    float: none; 
    } 
    .navbar-nav>li>a { 
    padding-top: 5px; 
    padding-bottom: 5px; 
    } 
    .navbar-text { 
    float: none; 
    margin: 15px 0; 
    } 
    /* since 3.1.0 */ 
    .navbar-collapse.collapse.in { 
    display: block!important; 
    } 
    .collapsing { 
    overflow: hidden!important; 
    } 
    .dropdown-menu { 
    font-size: 16px; 
    } 
} 

Answer 1

당신이 사업부 폭 100 %에 추가 ... 클릭 한 후 너비 100 %를 추가하기 때문에 그 클릭하기 전에 버튼을 클릭하면 div가 이미 올바른 너비를 갖습니다. 보세요, 맞춤 클래스를 추가하고 너비를 정의합니다.