부트 스트랩 콤보 드롭 다운 버튼 공간 문제

부트 스트랩 분할 버튼 드롭 다운을 사용하고 있지만 버튼과 드롭 다운 메뉴 버튼 사이에 공백이 있습니다. 이 문제는 사파리 브라우저에서만 발생합니다. 그것은 다른 브라우저와 잘 작동합니다. 심지어는 휴식 공식 웹 사이트에부트 스트랩 콤보 드롭 다운 버튼 공간 문제

Bootstrap split dropdown menu

및 분할 버튼 드롭 다운에 공백이 : 여기에서 코드를 사용하고 있습니다. 이는 사파리에서만 발생하는 문제입니다. 다른 브라우저에서 잘 작동합니다. 나는 사파리의 2-3 가지 설치와 함께 점검했다.

출처

2013-01-05 beNerd

이 버그는 allready로보고되었으며 Windows 용 사파리가 단순히 부트 스트랩에서 지원되지 않는다고 생각됩니다.

https://github.com/twitter/bootstrap/issues/5644

은 또한이 버그는 사파리의 윈도우 버전에 발생하는 것 같습니다.

당신이이 버그와 함께 살 수 없다면, 사파리를 목표로 삼아라. 그러나 승리와 맥 모두에서 그것을 테스트해라. 그렇지 않으면 이기기 위해 그것을 고쳐 주지만 맥에서 그것을 깨뜨리지 마라.

방법은 사파리 대상 : 추가 # 추가

하는 유일한 JS 만 윈도우 에이전트를 대상으로하는 방법 (매우 해키) 사파리

##id {width:100px;}

로 읽을 수 있습니다 :

if (navigator.appVersion.indexOf("Mac")!=-1) { 
} else { 
    $('body').addClass('win'); 
}

이것은 사용자가 윈도우를 사용한다면 body에 클래스 win을 추가 할 것입니다.

그 후 당신은 CSS로 사파리를 타겟팅 할 수 있습니다 :

@media screen and (-webkit-min-device-pixel-ratio:0) { 

    .win { height: 100%; } 

}

결과는, 당신은 Windows에서만 사파리을 목표로 할 것이다.

그 후에 문제를 일으키는 것이 무엇이든 조정할 필요가 있습니다.

대부분의 경우 단추 요소의 여백 또는 여백 또는 너비 일 수 있습니다. 상대적인 위치를 돕는 것이없는 경우 또는 음수 여유가 도움이 될 수 있다면 이걸 가지고 노는 것이 좋습니다. 부트 스트랩에서

관련 HTML :

<!-- /btn-group --> 
       <div class="btn-group"> 
       <button class="btn btn-primary">Action</button> 
       <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
       </ul> 
       </div><!-- /btn-group -->

당신이 드롭 다운 메뉴 사용을 대상으로 할 경우

@media screen and (-webkit-min-device-pixel-ratio:0) { 

    .win .dropdown-menu { height: 100%; } 

}

이제 멀리 해킹 수 있습니다!

또는, 단순히 윈도 용 사파리를 지원 : @media screen and (-webkit-min-device-pixel-ratio:0)를 사용하여와

출처

2013-01-05 11:30:59 user1721135

나는 Z- 인덱스 위치를 사용하여이 모두 사파리와 크롬 브라우저에서 문제를 해결할 수있는 솔루션을 발견하고 자바 스크립트 나 HTML 코드를 변경을 필요로하지 않습니다 창문에서 공식적으로 중단 되었습니까? – beNerd

모르겠다. 내가 아는 것은 부트 스트랩이 그것을 지원하지 않는다는 것입니다. – user1721135

문제는이뿐만 아니라 크롬 브라우저를 대상으로한다는 것입니다니까.이 사파리가 가지고있는 사실이다

@media screen and (-webkit-min-device-pixel-ratio:0) { 
.btn-group > .btn + .btn { 
    margin-left: -5px; 
} 
.btn-group:hover a { 
    z-index:1; 
} 
.btn-group:hover button{ 
    z-index:10; 
} 
.input-append input{ 
    z-index:1; 
} 
.input-append a{ 
    z-index:10; 
}}

출처

2013-02-07 13:53:56 vadimski

부트 스트랩 콤보 드롭 다운 버튼 공간 문제

답변

관련 문제