부트 스트랩 열

에 중첩 된 입력을 피팅 나는이 Bootply에서 볼 수 있듯이 세 개의 중첩 된 입력 그룹이 : 내가 넘쳐없이 사용 가능한 열 공간 내에서 한 줄에 맞게 싶습니다부트 스트랩 열

. 어떻게 이것을 달성합니까?

이 관련된 상기 이미지 HTML이다

<form class="form-horizontal"> 
    <div class="row"> 
    <div class="col-sm-10 col-sm-offset-1"> 
     <div class="row form-group form-inline"> 
     <div class="control-group"> 
      <label class="control-label col-lg-3 no-padding-right"><b>Expected Sales:</b></label> 
      <div class="col-lg-6"> 
      <div class="input-group"> 
       <span class="input-group-addon" id="expected-sales-year-1-lbl">2017</span> 
       <input type="text" pattern="[0-9.]+" id="expected-sales-year-1-value" name="expected-sales-year-1-value" placeholder="in Mt/yr"> 
      </div>  
      <div class="input-group"> 
       <span class="input-group-addon" id="expected-sales-year-2-lbl">2018</span> 
       <input type="text" pattern="[0-9.]+" id="expected-sales-year-2-value" name="expected-sales-year-2-value" placeholder="in Mt/yr"> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon" id="expected-sales-year-3-lbl">2019</span> 
       <input type="text" pattern="[0-9.]+" id="expected-sales-year-3-value" name="expected-sales-year-3-value" placeholder="in Mt/yr"> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="control-group"> 
      <label class="control-label col-lg-3 no-padding-right"><b>Price:</b></label> 
      <div class="col-lg-6"> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="ace-icon glyphicon glyphicon-euro"></i></span> 
       <input type="text" class="form-control input-control" pattern="[0-9.]+" id="price" name="price" placeholder="in €/kg"> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</form>

업데이트 : 행 포장이 Bootply 같이 입력 그룹들 주위 col-lg-*와 div에 첨가하여 준다 :

출처

2017-01-17 nluigi

<div class="form-group form-inline"> 
    <div class="control-group"> 
     <label class="control-label col-lg-3 no-padding-right"><b>Expected Sales:</b></label> 
     <div class="col-lg-6"> 
      <div class="row"> 
       <div class="col-lg-4"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="expected-sales-year-1-lbl"></span> 
         <input type="text" pattern="[0-9.]+" id="expected-sales-year-1-value" name="expected-sales-year-1-value" placeholder="in Mt/yr" /> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="expected-sales-year-2-lbl"></span> 
         <input type="text" pattern="[0-9.]+" id="expected-sales-year-2-value" name="expected-sales-year-2-value" placeholder="in Mt/yr" /> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="input-group"> 
         <span class="input-group-addon" id="expected-sales-year-3-lbl"></span> 
         <input type="text" pattern="[0-9.]+" id="expected-sales-year-3-value" name="expected-sales-year-3-value" placeholder="in Mt/yr" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

출처

2017-01-17 20:34:58

이렇게하면 입력 그룹이 한 줄에 표시되지만 조합 된 너비는 여전히 예상보다 큽니다 (가격 텍스트 필드와 비교됩니다. 내 업데이트 된 질문 참조). 또한 더 이상 입력 그룹 사이에 공백이 없습니다. 어떤 제안이 문제를 해결하는 방법? – nluigi

그 입력에 여분의 너비를주는 CSS가있는 것 같습니다. 각 그룹 사이에는 간격이 있어야합니다. 실례가 있습니까? 나는 더 많은 CSS 나 뭔가 살아있는 것을 보지 않고는 확실히 말할 수 없다. –

bootplyrap에서도이 문제가 발생하기 때문에 부트 스트랩 CSS를 사용해야합니다. 나는 bootply를 내 질문에 추가했다. – nluigi

부트 스트랩 열

답변

관련 문제