컨트롤 내가 큰 화면에 템플릿을 사용하는 경우

Question

내가 부트 스트랩

에 대한 bootwatch CSS의 http://bootswatch.com/flatly/를 사용하여 너무 키가, 구성 요소는

http://jsfiddle.net/o37rak4k/1/

내가 너무 키가 내가 잘 사용하지 않는다고 상상해 보라. 어떻게 그 문제를 해결할 수 있습니까? 나는 (텍스트 크기보다 조금 더) "정상적인"크기로 제어 할 필요가

내 HTML 코드 :

<div class="container"> 
    <h2> 
     Liste des interventions 
    </h2> 

    <fieldset> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="col-lg-2 control-label" for="contenu_DdlClients">Client :</label> 
       <div class="col-lg-10"> 
        <select name="ctl00$contenu$DdlClients" id="contenu_DdlClients" class="form-control"> 
         <option value="0"></option></option> 
        </select> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group"> 
       <label class="col-lg-2 control-label">Planification de :</label> 
       <div class="col-lg-2"> 
        <div class="form-group has-success has-feedback"> 
         <input name="ctl00$contenu$dateDebPlanification" type="text" id="contenu_dateDebPlanification" class="form-control hasDatepicker" style="width:130px;"> <span class="glyphicon glyphicon-calendar form-control-feedback"></span> 
<span id="contenu_RgDateDebut" style="visibility:hidden;">*</span> 

        </div> 
       </div> 
       <div class="col-lg-1">à :</div> 
       <div class="col-lg-2"> 
        <div class="form-group has-success has-feedback"> 
         <input name="ctl00$contenu$dateFinPlanification" type="text" id="contenu_dateFinPlanification" class="form-control hasDatepicker" style="width:130px;"> <span class="glyphicon glyphicon-calendar form-control-feedback"></span> 
<span id="contenu_RgDateFin" style="visibility:hidden;">*</span> 

        </div> 
       </div> 
      </div> 
     </div> 
</div> 

Answer 1

당신 중 하나가 bootstrap.min.css의 라인 높이 또는 높이를 변경해야하거나 bootstrap.css 파일은 부트 스트랩 class="form-control"의 표준이므로 그대로 사용하십시오. 또한

당신이 페이지를 재정의 할 수 있습니다 (적합하지 않을 것이다 - 오히려 CSS에서)

.form-control {height:16px;} 

JSFIDDLE DEMO

달력 이미지는 다음과 같은 예를 들어 사용을 위해 :

JSFIDDLE DEMO for Calendar Glyphicon을 - 코드를 한번보세요. 원래 코드와 다른 예제를 추가했습니다.

GRID을 사용하여 class="col-...."을 사용하여 입력에 대한 실제 너비 설정이 아니라 너비를 지정해야합니다. 그렇지 않으면 캘린더 이미지가 입력 상자 옆에 앉지 않고 제대로 크기가 조정되지 않습니다.

Horizontal form spacing and label alignment - 폼 레이아웃은 수평 및 레이블 잘 정말 좋습니다하지만, 다른 라인은 다른 크기를 입력