>

이 질문에 대한 몇 가지 '중복'을 조용히 보았습니다. 가장 일반적인 두 가지 답변은

<올>
  • 여백/패딩 규칙을 사용하여 CSS 클래스 생성
  • 각 div에 대해 추가 중첩 열을 추가합니다 (부트 스트랩은 열이 "행"클래스의 직접 중첩이어야 함을 권장하지 않으므로 권장하지 않습니다).
  • 다음은 간단한 HTML 트리 구조입니다 :

         <div class="row">
            <div class="col-md-2">
            </div>
            <div class="col-md-4">
                <input type="text"/>
            </div>
            <div class="col-md-2">
                <input type="text"/>
            </div>
            <div class="col-md-4">
                <input type="text"/>
            </div>
           </div>
    
    

    결과는 다음과 같습니다.

    질문 부트 스트랩 그리드 시스템의 각 열 사이에 일정한 간격/거터를 만들려면 어떻게해야합니까?

    • 답변 # 1

      부트 스트랩 4에는 설명서에 따라 수정할 수있는 sass 변수가 있습니다. 그들은 단지 CSS로 그것을하는 방법에 대한 참조를하지 않습니다. 변수를 $grid-gutter-width라고합니다. 이 문서는 다음과 같습니다.

      와이즈 비즈

      코드는 다음과 같습니다.

      Columns and gutters The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width allows breakpoint-specific widths that are divided evenly across padding-left and padding-right for the column gutters.

      따라서이 거터 변수는 열의 왼쪽에서 오른쪽으로 채워집니다. 부트 스트랩 설치가 $grid-columns: 12 !default; $grid-gutter-width: 30px !default; 에있는 곳 에서이 변수를 수정해야한다고 생각합니다. .

    • 답변 # 2

      각 부트 스트랩 그리드 열 클래스에는 왼쪽과 오른쪽에 기본 15px 패딩이 있습니다.이 클래스를 재정의하려면 자체 클래스를 사용하고 자체 패딩을 정의 할 수 있지만 부트 스트랩 뒤에이 클래스를 배치해야합니다. .css.

      입력을 컨테이너의 전체 너비로 만들려면 각 텍스트 기반 입력에 대해 양식 제어 클래스를 추가하십시오.

      _variables.scss

    관련 자료

  • 이전 addSbtPlugin ("orgxerialsbt"%"sbt-sonatype"%"11")을 프로젝트에 추가 할 때"해결되지 않은 종속성"이 실패 함
  • 다음 데이터를 사용하여 PowerBuilder로 Javascript 이벤트 콜백