>

부트 스트랩을 사용하는 행이 있고 첫 번째 자식과 마지막 자식을 제외한 각 섹션 사이에 공백을 추가하고 싶습니다. 그러나 내 코드로 인해 행이 오버플로됩니다.

HTML :

           <div class="row">
                <div class="col-md-4 section">
                    hello
                </div>
                <div class="col-md-4 section">
                    hello
                </div>
                <div class="col-md-4 section">
                    hello
                </div>
            </div>

CSS :

.section{
    background-color: red;
    margin-left: 5px;
    margin-right: 5px;
}
.section:first-of-type{
    margin-left: 0px;
    margin-right: 0px;
    background-color: green;
}
.section:last-of-type{
    margin-left: 0px;
    margin-right: 0px;
    background-color: blue;
}

출력 :

Hello         Hello
Hello

  • 답변 # 1

    부트 스트랩 V4를 사용하면 col 만 사용하여 쉽게 수행 할 수 있습니다. :

    .section {
      background-color: red;
      margin-left: 15px;
      margin-right: 15px;
    }
    .section:first-of-type {
      margin-left: 0px;
      margin-right: 0px;
      background-color: green;
    }
    .section:last-of-type {
      margin-left: 0px;
      margin-right: 0px;
      background-color: blue;
    }
    
    

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <div class="container-fluid">
      <div class="row">
        <div class="col section">
          hello
        </div>
        <div class="col section">
          hello
        </div>
        <div class="col section">
          hello
        </div>
      </div>
    </div>
    
    

관련 자료

  • 이전 SonarQube 문제 페이지에서 특정 규칙의 위반을 어떻게 필터링합니까?
  • 다음 javascript - 두 열을 모두 편집하면 이미지가 영구적으로 유지됩니다