부트 스트랩-화면 크기가 더 작을 때 패딩 또는 여백 제거

수정 됨 : 화면이 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 축 오버플로가 발생합니다. 이것은 부트 스트랩 그리드에서 가장 어리석은 것 중 하나입니다.

논리적으로 접근해야합니다.

1. .container행 이외의 다른 용도로 클래스를 사용하지 마십시오.
2. .container그리드가 아닌 HTML과 함께 사용하기 위해 패딩이없는 클래스 의 복제본을 만듭니다.
3. .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를 다시 작성하는 것이 아니 었습니다. 제가 깨달은 일관된 패턴 은 더 긴 단어 의 길이가 디자인에서 벗어나 여백을 만드는 것 입니다.

솔루션 단계 :

1. 컨테이너가 포함 된 섹션을 일시적으로 삭제하여 페이지를 테스트하고 작은 브라우저에서 사이트를 테스트합니다. 이것은 문제 컨테이너를 식별합니다.

2. div 형식화 문제가있을 수 있습니다. 그렇다면 수정하십시오. 모든 것이 잘되면 :

3. 줄 바꿈하지 않는 긴 단어를 사용했는지 확인하십시오. 단어를 변경할 수없는 경우 (예 : 태그 라인 또는 슬로건 등)

해결 방법 1 : 더 작은 화면을 위해 미디어 쿼리에서 글꼴을 더 작은 크기로 포맷합니다 (보통 @media (최대 너비 : 767px)이면 충분합니다).

또는:

해결책 2 :

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

Paulius Marčiukaitis의 CSS는 내 Genesis 테마에 잘 맞았습니다. 여기에 내 요구 사항에 맞게 수정 한 방법이 있습니다.

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left:0px;
    padding-right:0px;
}

Bootstrap 3/4를 위해 내가하는 일

용기 대신 용기 유체를 사용하십시오.

내 CSS에 추가

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

이렇게하면 1400px 너비 화면 아래의 여백이 제거됩니다.

여백 문제를 일으킬 수있는 또 다른 CSS는 direction:someValueCSS에있는 것이므로 이니셜로 설정하여 제거하면됩니다.

예를 들면 :

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}

쉬운 해결책은 다음과 같이 작성하는 것입니다.

px-lg-1

mb-lg-5

lg를 추가하면 클래스가 큰 화면에만 적용됩니다.