특정 div의 거터 공간 만 제거

programing tip

특정 div의 거터 공간 만 제거

itbloger 2020. 11. 13. 07:53

특정 div의 거터 공간 만 제거

기본 부트 스트랩 그리드 시스템은 30px아래와 같이 거터가 있는 각 범위에 12 개의 열을 사용 합니다. 거 터는 열 사이의 공백입니다. 거터 너비가 20px- 사이 인 것 같습니다 30px. 30px여기에 있다고 가정 해 봅시다 .

여기에 이미지 설명 입력

div행에 거터 공간이 없도록 특정에 대한 거터 공간을 제거하고 싶습니다 . 각 범위는 거터없이 서로 옆에 있습니다.

문제는 여백 30px(거터)을 제거 하면 행 끝에 360px(12 * 30px)가 남습니다 .

특정에 div대해서만 거터 공간을 제거하고 싶습니다 . 에있는 divs에 대한 것이라고 가정 해 봅시다 main_content div.

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

divBootstrap 반응성을 잃지 않고 행 끝에 공백을 남기지 않고 특정 거터를 제거하려면 어떻게 해야합니까?

Bootstrap 3.0 이상의 경우이 답변을 참조하십시오.

.span1여기서는 클래스 (12 개의 넓은 격자에 한 열) 만보고 있지만 다음에서 왼쪽 여백을 제거하여 원하는 것을 얻을 수 있습니다.

.row-fluid [class*="span"] { margin:0 } // line 571 of bootstrap responsive

그런 다음 .row-fluid .span1의 너비를 100 %로 나눈 12 열 (8.3333 %)로 변경합니다.

.row-fluid .span1 { width: 8.33334% } // line 632 of bootstrap responsive

기본 그리드 시스템을 그대로 유지할 수있는 추가 클래스를 추가하여이를 수행 할 수 있습니다.

.row-fluid [class*="NoGutter"] { margin-left:0 }
.row-fluid .span1NoGutter { width: 8.33334% }

<div class="row-fluid show-grid">
    <div class="span1NoGutter">1</div>
</div>

다른 모든 열에 대해서도이 패턴을 반복 할 수 있습니다.

.row-fluid .span2NoGutter { width:16.66667%; margin-left:0 } // 100% / 6 col
.row-fluid .span4NoGutter { width:25%; margin-left:0 } // 100% / 4 col
.row-fluid .span3NoGutter { width:33.33333%; margin-left:0 } // 100% / 3 col
or
.row-fluid .span4NoGutter { width:25% }
.row-fluid [class*="NoGutter"] { margin-left:0 }

* EDIT (기본 그리드 사용 고집)
기본 그리드 시스템이 요구 사항 인 경우 기본적으로 너비가 940px (.container 및 .span12 클래스)입니다. 따라서 가장 간단한 용어로 940을 12로 나누는 것이 좋습니다. 이는 78.33333px 너비의 컨테이너 12 개에 해당합니다.

따라서 bootstrap.css의 339 행은 다음과 같이 편집 할 수 있습니다.

.span1 { width:78.33333px; margin-left:0 }
  or
.span1 { width:8.33334%; margin-left:0 }
// this should render at 78.333396px (78.333396 x 12 = 940.000752)

2018 업데이트

들어 부트 스트랩 3 , 훨씬 쉽다. Bootstrap 3은 이제 여백 대신 패딩을 사용하여 "거터"를 만듭니다.

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

그런 다음 no-gutter공백을 제거 할 행에 추가하십시오 .

  <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>

데모 : http://bootply.com/107708

부트 스트랩 4 (추가 CSS 필요 없음)

Bootstrap 4에는 no-gutters전체에 적용 할 수 있는 클래스가 포함되어 있습니다 row.

http://www.codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

패딩 / 여백을 제어 할 수있는 새로운 간격 유틸리티 도 있습니다 . 따라서 이것은 열의 단일 열 (예 :) <div class="col-3 pl-0"></div>세트 padding-left:0;에 대한 패딩 (거터)을 변경하는 데 사용 하거나 px-0왼쪽 및 오른쪽 패딩 (x 축)을 모두 제거 하는 데 사용할 수 있습니다.

업데이트 : TWBS 3 getbootstrap.com/customize/#grid-system 링크

Twitter Bootstrap은 사용자 지정 구성으로 모든 또는 일부 구성 요소를 다운로드 할 수 있는 사용자 지정 양식 을 제공 합니다.

이 양식을 사용하여 거터없이 그리드를 다운로드 할 수 있으며 응답 성이 있습니다. 너비와 관련된 그리드 구성 요소와 응답 형 구성 요소 만 있으면됩니다.

데모 (jsfiddle) 맞춤 그리드

LESS 에 대해 조금 알고 있다면 생성 된 CSS를 선택한 선택기에 포함 할 수 있습니다.

/* LESS */
.some-thing {
    /* The custom grid
      ...
    */
}

그렇지 않은 경우 각 규칙 앞에이 선택기를 추가해야합니다 (어쨌든 그다지 많지 않음).

덜 알고 LESS 스크립트를 사용하여 스타일을 관리하는 경우 Grid mixins v2 (github)를 직접 사용하는 것이 좋습니다.

그리드 믹스 인 v3 (github)

총 너비는 요소의 너비에 여백 공간의 너비를 더한 값으로 계산됩니다. 여백 공간을 제거하려면 괜찮지 만 언급 한 간격을 피하려면 열 너비도 늘려야합니다.

이 경우 제거 된 여백 공간 (30px)만큼 단일 열의 너비를 늘려야합니다.

따라서 열 너비가 일반적으로 30PX 여백 공간으로 50PX라고 가정 해 보겠습니다. 여백 공간을 제거하고 너비를 80PX로 만듭니다.

span3의 예제 4 열. 다른 스팬 너비의 경우 새 너비 = 이전 너비 + 거터 크기를 사용합니다. 미디어 쿼리를 사용하여 반응하도록합니다.

css :

    <style type="text/css">
    @media (min-width: 1200px) 
    {   
        .nogutter .span3
        {
            margin-left: 0px; width:300px;
        }   
    }
    @media (min-width: 980px) and (max-width: 1199px) 
    { 
        .nogutter .span3
        {
            margin-left: 0px; width:240px;
        }   
    }
    @media (min-width: 768px) and (max-width: 979px) 
    { 
        .nogutter .span3
        {   
            margin-left: 0px; width:186px;
        }   
    }
    </style>

html :

<div class="container">
<div class="row">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
  <div class="span3" style="background-color:red;">...</div>
</div> 
</div>

update : 또는 span12 div를 100 / 열 수 % 너비 부분으로 분할합니다.

<div class="row">
  <div class="span12">
    <div style="background-color:green;width:25%;float:left;">...</div>
  <div style="background-color:yellow;width:25%;float:left;">...</div>
  <div style="background-color:red;width:25%;float:left;">...</div>
  <div style="background-color:blue;width:25%;float:left;">...</div>
  </div>
</div>

두 솔루션 모두 http://bootply.com/61557을 참조하십시오.

흥미 롭군 ...

Twitter Bootstrap의 기본 그리드, 즉 폭 940px에서 거터를 제거합니다. 그리고 기본 그리드에는 940px 너비의 컨테이너가 있고 스타일 시트에 bootstrap-responsive.css가 있습니다.

내가 당신의 질문을 맞았다면, 이것이 내가 한 방법입니다 ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Stackoverflow Question</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/bootstrap-responsive.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
    <![endif]-->




    <style type="text/css">
        #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
        }

        @media (min-width: 768px) and (max-width: 979px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 25%;
            }
        }


        @media (max-width: 767px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        @media (max-width: 480px) {
            #main_content [class*="span"] {
            margin-left: 0;
            width: 100%;
            }
        }

        <!-- For Visual Aid Only -->
        .bg1 {
            background-color: #C2C2C2;
        }

        .bg2 {
            background-color: #D2D2D2;
        }
    </style>
  <body>
    <div id="wrap">
        <div class="container">
            <div class="row-fluid">
                <div class="span1 text-center bg1">01</div>
                <div class="span1 text-center bg2">02</div>
                <div class="span1 text-center bg1">03</div>
                <div class="span1 text-center bg2">04</div>
                <div class="span1 text-center bg1">05</div>
                <div class="span1 text-center bg2">06</div>
                <div class="span1 text-center bg1">07</div>
                <div class="span1 text-center bg2">08</div>
                <div class="span1 text-center bg1">09</div>
                <div class="span1 text-center bg2">10</div>
                <div class="span1 text-center bg1">11</div>
                <div class="span1 text-center bg2">12</div>
            </div>



            <div id="main_content">
                <div class="row-fluid">
                    <div class="span3 text-center bg1">1</div>
                    <div class="span3 text-center bg2">2</div>
                    <div class="span3 text-center bg1">3</div>
                    <div class="span3 text-center bg2">4</div>
                </div>
            </div>
        </div><!--/container-->
    </div>
  </body>
</html>

그 결과는 ..

여기에 이미지 설명 입력

거터가없는 4div 범위는 작은 태블릿 가로 (800x600)에 대해 스팬 된 상태로 유지됩니다. 그보다 작은 크기는 4 개 div를 축소하고 세로로 쌓입니다. 물론 필요에 맞게 조정해야합니다.

Simplest way to remove padding and margin is with simple css.

<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>

Okay If you want to change the gutter inside one row, but want those (first and last) inner divs to align with the grid surrounding the .no-gutter row, you could copy-paste-merge most answers into the following snippet:

.row.no-gutter [class*='col-']:first-child:not(:only-child) {
    padding-right: 0;
}
.row.no-gutter [class*='col-']:last-child:not(:only-child) {
    padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) {
    padding-right: 0;
    padding-left: 0;
}

If you like to have a smaller gutter instead of completly none, just change the 0's to what you like... (eg: 5px to get 10px gutter).

To add to Skelly's Bootstrap 3 no-gutter answer above (https://stackoverflow.com/a/21282059/662883)

Add the following to prevent gutters on a row containing only one column (useful when using column-wrapping: http://getbootstrap.com/css/#grid-example-wrapping):

.row.no-gutter [class*='col-']:only-child,
.row.no-gutter [class*='col-']:only-child
{
    padding-right: 0;
    padding-left: 0;
}

참고 URL : https://stackoverflow.com/questions/16489307/remove-gutter-space-for-a-specific-div-only

'programing tip' 카테고리의 다른 글

JQuery-전역 변수에 ajax 응답 저장 (0)	2020.11.13
jQuery로 텍스트를 변경하는 방법 (0)	2020.11.13
Django CSRF 쿠키가 설정되지 않음 (0)	2020.11.13
'찾기'명령으로 수정 된 날짜 시간을 표시하는 방법은 무엇입니까? (0)	2020.11.13
ipython 서버를 시작할 수 없음 : notebook.notebookapp라는 모듈이 없습니다. (0)	2020.11.13

현재글특정 div의 거터 공간 만 제거

itbloger

특정 div의 거터 공간 만 제거

특정 div의 거터 공간 만 제거

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

티스토리툴바

특정 div의 거터 공간 만 제거

특정 div의 거터 공간 만 제거

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

관련글

티스토리툴바