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

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

---

수정 됨 : 화면이 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;
}

---

비슷한 서식과 코드를 사용하는 사이트에서이 문제가 발생했으며 일부 사이트가 작동하지 않게 만드는 누락 된 세부 사항이 무엇인지에 대해 생각했습니다.

부트 스트랩 3의 경우 : 저에게 대답은 .container-fluid, .row 또는 여백 재설정에 대한 CSS를 다시 작성하는 것이 아니 었습니다. 제가 깨달은 일관된 패턴 은 더 긴 단어 의 길이가 디자인에서 벗어나 여백을 만드는 것 입니다.

솔루션 단계 :

1. Test your page by temporarily deleting sections that contain containers and test your site on small browsers. This will identify your problem container.

2. You may have a div formatting problem. If you do, fix it. If all is well then:

3. Identify if you have used long words that are not wrapping. If you cannot change the word (like for tag lines or slogans, etc.)

Solution 1: Format the font to smaller size in your media query for smaller screen (I usually find @media (max-width: 767px) to be sufficient).

OR:

Solution 2:

@media (max-width: 767px){

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

---

The CSS by Paulius Marčiukaitis worked nicely for my Genesis theme, here's what how I further modified it for my requirement:

@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;
}

---

Heres what I do for Bootstrap 3/4

Use container-fluid instead of container.

Add this to my CSS

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

This removes margins below 1400px width screen

---

Another css that can make the margin problem is that you have direction:someValue in your css, so just remove it by setting it to initial.

For example:

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

---

In Bootstrap 4, the 15px margin the initial container has, cascades down to all rows and columns. So, something like this works for me...

@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;
    }
}

참고URL : https://stackoverflow.com/questions/16410659/bootstrap-removing-padding-or-margin-when-screen-size-is-smaller