부트스트랩 적응을 취소하는 방법

부트스트랩 적응을 취소하는 방법: 1. "" 헤더를 제거합니다. 2. .container 너비를 설정합니다.

이 튜토리얼의 운영 환경: windows10 시스템, bootstrap3.0 이 기사는 모든 브랜드의 컴퓨터에 적용됩니다.

추천: "부트스트랩 비디오 튜토리얼"

부트스트랩 반응형 솔루션 비활성화

저는 오랫동안 백그라운드 개발에 집중해왔기 때문에 며칠 전에 부트스트랩 프레임워크를 사용하여 여러 정적 페이지를 작성하라는 작업을 받았습니다. 시간이 흘러 마침내 페이지를 완성하는 데 3일이 걸렸습니다. 페이지를 앞뒤로 수정하고 제가 겪은 문제에 대해 이야기했습니다.

부트스트랩을 사용하여 페이지를 만든 후 팀장이 마음을 바꿔 부트스트랩을 사용하지 않거나 부트스트랩의 응답성을 비활성화해야 한다고 말했습니다. 부트스트랩 공식 웹사이트로 이동하여 비활성화하세요. 먼저 헤더를 제거하세요. 둘째:

container{
width: 1170px;
max-width: none !important;
}

와 같이 .container 너비를 설정합니다. 셋째: .col-xs-(최소 장치 그리드 클래스) 스타일을 사용하여 .col-md- 및 .col-lg-*를 대체합니다.

그러나 문제는 여기서 끝나지 않습니다.

이제 컨테이너에 고정 너비를 지정하세요. 흰색 배경의 탐색 표시줄 너비는 브라우저를 채울 수 있지만 화면이 작아지면 탐색 표시줄의 흰색 배경이 브라우저 너비를 채울 수 없게 됩니다. 더 작아! 또한 내 캐러셀 이미지도 브라우저 너비를 채워야 하는데 이제 중간에 표시됩니다. 알았더라면 지금 페이지를 다시 작성할 필요가 없을 거라 생각했습니다. ? 온라인으로 확인해 봤는데 해결이 안 되서 나중에 본문에 너비를 줄 수도 있고, 네비게이션 바와 캐러셀 너비를 동일하게 설정할 수도 있겠다는 생각이 들었습니다. ? 알아냈어, 넌 이러면 안 돼!

드디어 Firefox로 코드를 디버깅하던 중 우연히 @media라는 좋은 점을 발견했습니다. 그런데 제가 직접 설정했는데 브라우저에서 응답이 없어서 결국 말문이 막혔습니다. 이 스타일이 제대로 작동하지 않았다는 것을 알아내는 데 시간이 좀 걸렸습니다.

그래서 내비게이션 바와 캐러셀 반응성 문제를 해결하기 위한 네 번째 포인트는 다음과 같습니다.

@media screen and (max-width: 1400px) {
body{
width: 1400px;
}
}

그 말은 화면이 1400px보다 작을 때 본문 너비를 1400px로 설정하면 모르는 독자도 배울 수 있다는 것입니다. 온라인에서 보세요. 이건 좋은 일이에요!

마지막으로 top은 position이 절대 위치일 때 top을 의미합니다. 범위의 너비와 높이 설정은 효과가 없습니다. 블록 수준 요소가 아니며 div는 블록 수준 요소이고 범위는 인라인 요소입니다. 아래 그림의 버튼을 스팬을 이용하여 구현하고자 한다면 필요에 따라 패딩만 설정하면 됩니다. (패딩: 20px 20px 등)

저는 프론트엔드가 아니기 때문에 이런 스타일이 별로 익숙하지 않으시면 뿌리지 마세요.

위 내용은 부트스트랩 적응을 취소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!