수정 됨 :
화면이 480px 이하로 줄어들 때 사이드 패딩을 설정하는 선택기를 물어봐야할까요? 나는 이것을 찾기 위해 한동안 bootstrap-responsiveness.css를 탐색했지만 이것에 영향을 미치는 것은 없습니다.
원본
기본적으로 작은 장치 화면에서 응답 성을 위해 설정된 기본 패딩 또는 여백을 제거하고 싶습니다.
나는 한 background color재정의 container-fluid선택하고 더 큰 화면들이 폭에 걸쳐 완벽하게 100 % 렌더링하지만, 화면이 작은 크기로 감소, 기본적으로 부트 스트랩에 마진이나 패딩을 추가하는 것 container-fluid또는 container.
<div class="container-fluid">
<div class="row-fluid">
test
</div>
</div>
사용자 지정 CSS를 사용하여 Bootstrap의 기본 스타일을 덮어 쓰는 경우 작은 화면에서이 패딩을 제거하기 위해 어떤 미디어 쿼리 또는 선택기를 덮어 써야합니까?
답변
특히 ‘전화’에 대한 @media 쿼리는 ..
@media (max-width: 480px) { ... }
그러나 더 작은 화면 크기의 경우 패딩 / 여백을 제거 할 수 있습니다. 기본적으로 Bootstrap은 978px에서 본문, 컨테이너 및 탐색 모음에 대한 여백 / 패딩을 조정합니다.
다음은 저에게 효과가 있었던 몇 가지 쿼리입니다 (대부분의 경우).
@media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
body {
padding:0;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0;
margin-right: 0;
margin-bottom:0;
}
}
부트 스트랩 4 업데이트
다양한 화면 너비 (중단 점)에 대해 패딩 / 여백을 설정할 수 있는 새로운 반응 형 간격 유틸리티 를 사용하십시오 .
https://stackoverflow.com/a/43208888/171456
답변
여기에서 문제는 포함 된 행에 음수 여백을 적용 할 때 그리드 구조가이 패딩에 의존하기 때문에 컨테이너 패딩을 제거하는 것보다 훨씬 더 복잡합니다.
이 경우 컨테이너 패딩을 제거하면이 컨테이너 클래스 내부의 모든 행으로 인해 x 축 오버플로가 발생합니다. 이것은 부트 스트랩 그리드에서 가장 어리석은 것 중 하나입니다.
논리적으로 접근해야합니다.
.container행 이외의 다른 용도로 클래스를 사용하지 마십시오..container그리드가 아닌 HTML과 함께 사용하기 위해 패딩이없는 클래스 의 복제본을 만듭니다..container모바일 에서 패딩을 제거하려면 미디어 쿼리를 사용하여 수동으로 제거 할 수 있습니다. 그러면overflow-x: hidden;그다지 신뢰할 수 없지만 대부분의 경우 작동합니다.
사용 LESS하는 경우 최종 결과는 다음과 같습니다.
@media (max-width: @screen-md-max) {
.container{
padding: 0;
overflow-x: hidden;
}
}
미디어 쿼리를 원하는 크기로 변경하십시오.
마지막으로 Foundation Framework그리드를 더 발전된 방식으로 사용하는 것이 좋습니다.
답변
이 스레드는 내 특정 경우 (부트 스트랩 3)에서 솔루션을 찾는 데 도움이되었습니다.
@media (max-width: 767px) {
.container-fluid, .row {
padding:0px;
}
.navbar-header {
margin:0px;
}
}
답변
이와 같은 문제를 해결하기 위해 저는 CSS를 사용하고 있습니다-가장 빠르고 간단한 방법으로 … 필요에 따라 수정하세요 …
@media only screen and (max-width: 480px) {
#your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
#your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
#your_id {width:000px;height:000px;}
}
답변
장치의 너비를 100 %로하는 요소를 얻는 방법은 음의 왼쪽 및 오른쪽 여백을 사용하는 것입니다. 본문의 패딩은 24px이므로 다음과 같이 음수 여백을 사용할 수 있습니다.
element{
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
}
답변
Bootstrap 4에서 초기 컨테이너의 15px 여백은 모든 행과 열로 계단식으로 내려갑니다. 그래서 이런 것이 저에게 효과적입니다 …
@media (max-width: 576px) {
.container-fluid {
padding-left: 5px;
padding-right: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-left: 5px;
padding-right: 5px;
}
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
}
답변
비슷한 형식과 코드를 사용하는 사이트에서이 문제가 발생했으며 일부 사이트가 작동하지 않게 만드는 누락 된 세부 사항이 무엇인지에 대해 생각했습니다.
부트 스트랩 3의 경우 : 저에게 대답은 .container-fluid, .row 또는 여백 재설정에 대한 CSS를 다시 작성하는 것이 아니 었습니다. 제가 깨달은 일관된 패턴 은 더 긴 단어 의 길이가 디자인에서 벗어나 여백을 만드는 것 입니다.
솔루션 단계 :
-
컨테이너가 포함 된 섹션을 일시적으로 삭제하여 페이지를 테스트하고 작은 브라우저에서 사이트를 테스트합니다. 이것은 문제 컨테이너를 식별합니다.
-
div 형식화 문제가있을 수 있습니다. 그렇다면 수정하십시오. 모든 것이 잘되면 :
-
줄 바꿈하지 않는 긴 단어를 사용했는지 확인하십시오. 단어를 변경할 수없는 경우 (예 : 태그 라인 또는 슬로건 등)
해결 방법 1 : 더 작은 화면을 위해 미디어 쿼리에서 글꼴을 더 작은 크기로 포맷합니다 (보통 @media (최대 너비 : 767px)이면 충분합니다).
또는:
해결책 2 :
@media (max-width: 767px){
h1, h2, h3 {word-wrap: break-word;}
}
