부트 스트랩 3 - 4 인라인 입력이 같은 공백으로 된 모달

모달 창이 있고 4 개의 인라인 입력이 필요합니다. 하지만 그들은 측면에 15px 패딩을 가지고 있으며, 2 입력은 전체 30px 패딩입니다.부트 스트랩 3 - 4 인라인 입력이 같은 공백으로 된 모달

15px 간격을 입력 사이에 어떻게 만들 수 있습니까?

편집 : 양쪽에 동일한 간격과 입력이 필요합니다. jsfiddle에

내 시도 :

코드 :

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 
      <div class="modal-body"> 

       <div class="row"> 
        <div class="col-xs-3"> 
         <input type="text" class="form-control" placeholder=".col-xs-3"> 
        </div> 
        <div class="col-xs-3"> 
         <input type="text" class="form-control" placeholder=".col-xs-3"> 
        </div> 
        <div class="col-xs-3"> 
         <input type="text" class="form-control" placeholder=".col-xs-3"> 
        </div> 
        <div class="col-xs-3"> 
         <input type="text" class="form-control" placeholder=".col-xs-3"> 
        </div> 
       </div> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div>

출처

2017-03-13 Lajdák Marek

대신 col-의 기본 CSS를 오버라이드 (override)의 * 내가 필요 adjusst하는 클래스에 CSS를 추가 한 후 사용자 정의 클래스를 추가합니다. – happymacarts

다른 옵션이 있습니다. 당신은 클래스와 CSS의 비트를 추가 할 수 있습니다

.spacing > div + div{padding-left: 0;}

http://jsfiddle.net/5u2paavk/

출처

2017-03-13 15:29:51

물론,이 같은 row 및 col-에 패딩과 부정 여백을 조정하는 특별한 클래스를 사용

를

.row.no-margin { 
    margin-left: -7.5px; 
    margin-right: -7.5px; 
} 

.row.no-margin > .col-xs-3{ 
    padding-left: 7.5px; 
    padding-right: 7.5px; 
}

Demo on Codeply

출처

2017-03-13 15:28:39 ZimSystem

thx. 업데이트 된 질문이었습니다. 목표는 측면과 입력 사이에서 동일한 간격이었습니다. 당신의 솔루션은 15px에서 15px까지의 입력 간격을 7.5px로 만듭니다. –

그렇다면 특수 클래스로 .row 마진을 제거하면됩니다. 응답을 – ZimSystem

으로 업데이트했습니다. 그렇다면이 외부 열을 어떻게 해결할 수 있습니까? 패딩 문제? – ZimSystem

부트 스트랩 3 - 4 인라인 입력이 같은 공백으로 된 모달

답변

관련 문제