믹스 인을 사용할 때 부트 스트랩 2 열 문제가 발생합니다.

Question

부트 스트랩 2 믹스 .makeRow() 및 .makeColumn()을 사용하여 4,3,5 열을 전체 행 길이 12 너비와 동일하게 만듭니다. 하지만 제대로 적용되지 않습니다. This is a screenshot of what I get.

마크 업 :

<div class="calculators-form-field credit-amount"> 
      <div class="calculators-labels"> 
       <label>Your monthly budget <i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i> 
        <a class="calculators-helper-link" href="#" data-toggle="modal" data-target="#budgetCalModal">(Help me)</a> 
       </label> 
      </div> 
      <div class="calculators-sliders"> 
       <input type="range" value="0" min="50" max="5000" step="50" tabindex="-1" data-bind="value: monthlyBudget"> 
      </div> 
      <div class="calculators-inputs"> 
       <div class="input-group input-prepend"> 
        <span class="input-group-addon add-on">$</span> 
        <input name="monthlyBudget" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget"> 
       </div> 
      </div> 
      <div class="calculators-inputs-error" id="affordabilityCalErrorBudget"></div> 
     </div> 

차감 :

.calculators-form-field { 
    .makeRow(); 
    margin-bottom: 10px; 

    .calculators-labels { 
     .makeColumn(3); 

     .calculators-sliders { 
      input[type='range'] { 
       width: 100%; 
      } 
      .makeColumn(4); 
     } 
    } 
    .calculators-inputs { 
      .makeColumn(5); 
    } 

} 

사람이 어떻게이 문제를 해결하는 방법을 말해 줄래?

Answer 1

은 첫째로 당신은 수정없이 적은 최신 버전의 부트 스트랩 2를 컴파일 할 수 없습니다 통지 참조 : Less v2 does not compile Twitter's Bootstrap 2.x

을 두 번째로 내가 일곱 단계 - 최대 옳다고 @ 생각; 다음과 같이

@import "bootstrap3/bootstrap-2.3.2/less/bootstrap.less"; 
.calculators-form-field { 
    .makeRow(); 
    margin-bottom: 10px; 

    .calculators-labels { 
     .makeColumn(3); 

    } 
    .calculators-sliders { 
    input[type='range'] { 
      width: 100%; 
     } 
    .makeColumn(4); 
    } 


    .calculators-inputs { 
      .makeColumn(5); 
    } 

} 

는 CSS로 컴파일 :

.calculators-form-field { 
    margin-left: -20px; 
    *zoom: 1; 
    margin-bottom: 10px; 
} 
.calculators-form-field:before, 
.calculators-form-field:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 
.calculators-form-field:after { 
    clear: both; 
} 
.calculators-form-field .calculators-labels { 
    float: left; 
    margin-left: 20px; 
    width: 220px; 
} 
.calculators-form-field .calculators-sliders { 
    float: left; 
    margin-left: 20px; 
    width: 300px; 
} 
.calculators-form-field .calculators-sliders input[type='range'] { 
    width: 100%; 
} 
.calculators-form-field .calculators-inputs { 
    float: left; 
    margin-left: 20px; 
    width: 380px; 
} 

위의 CSS 코드는 기본 940px 그리드 잘 작동하는 것 같다, 참조 : http://codepen.io/anon/pen/ogoyZW

당신이 반응 사용하는 상황에서 그리드가 예상대로 작동하지 않습니다. https://github.com/less/less.js/issues/2435으로 인해 .makeColumn() 및 .makeRow 믹스 인을 다시 사용할 수 없습니다. 즉 아래 그림과 같이 당신은 새로운이나 mixin을 만들려고 할 수 있습니다

.makeRow-responsive() { 
    .gutter(@GutterWidth) { 
    margin-left: @GutterWidth * -1; 
    } 
    .clearfix(); 
    .gutter(@gridGutterWidth); 

    @media (min-width: 1200px) { 
    .gutter(@gridGutterWidth1200); 
    } 
    @media (min-width: 768px) and (max-width: 979px) { 
    .gutter(@gridGutterWidth768); 
    } 

} 

.makeColumn-responsive(@columns: 1, @offset: 0) { 
    .set(@width; @GutterWidth) { 
    margin-left: (@width * @offset) + (@GutterWidth * (@offset - 1)) + (@GutterWidth * 2); 
    width: (@width * @columns) + (@GutterWidth * (@columns - 1)); 
    } 
    float: left; 
    .set(@gridColumnWidth;@gridGutterWidth); 

    @media (min-width: 1200px) { 
    .set(@gridColumnWidth1200,@gridGutterWidth1200); 
    } 
    @media (min-width: 768px) and (max-width: 979px) { 
    .set(@gridColumnWidth768,@gridGutterWidth768); 
    } 

} 

다음과 같이

이제 위 유지 mixin을 호출 할 수 있습니다

.calculators-form-field { 
    .makeRow-responsive(); 
    margin-bottom: 10px; 

    .calculators-labels { 


    .makeColumn-responsive(3); 


    } 
    .calculators-sliders { 
    input[type='range'] { 
      width: 100%; 
     } 
    .makeColumn-responsive(4); 

    } 


    .calculators-inputs { 
      .makeColumn-responsive(5); 

    } 

} 

예 : 당신의 HTML에서 http://www.bootply.com/CJtufRFlI2