如何擺脫Bootstrap模式中項目之間的額外空間？

我正在使用引導程序的網格來佈置模式內的窗體。標籤和輸入元素之間的空間太大，如果我在一行中有兩個表單控件，則它們之間的空間太大。我爲每個元素使用了3列，對任何元素都使用了更少的字符，並且我得到了換行或裁剪。如何擺脫Bootstrap模式中項目之間的額外空間？

<div class="modal-body"> 
    <div class="form-horizontal">  
     <div class="form-group"> 
      <label class="control-label col-xs-3">Start Time:</label> 
      <div class="col-xs-3 margin-top-sm"> 
       <div class="input-group bootstrap-timepicker timepicker"> 
        <input type="text" class="form-control" data-provide="timepicker" data-bind="value:startTime" id="StartTime" /> 
        <span class="input-group-addon" ><i class="fa fa-clock-o"></i></span> 
       </div> 
     </div> 
      <label class="control-label col-xs-3">End Time:</label> 
      <div class="col-xs-3 margin-top-sm"> 
       <div class="input-group bootstrap-timepicker timepicker"> 
        <input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" /> 
        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span> 
       </div> 
      </div>     
     </div> 
    </div> 
</div>

來源

2015-11-08 Musical Shore

所以，你希望他們左對齊儘可能接近？ –

他們必須內聯嗎？ –

我想減少標籤和控件之間的空間，如果可能，我想減少中間的空間。 –

我已經改變了你的HTML和CSS來得到這個期望的結果。而不是使用cols-*我以前spans和row-fluid

HTML：

<div id="myModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-body"> 
      <div class="row-fluid"> 
       <div class="span6"> 
        <label class="control-label">Start Time:</label> 
        <div class="input-group bootstrap-timepicker timepicker"> 
        <input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" /> 
        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span> 
        </div> 
       </div> 
       <div class="span6"> 
        <label class="control-label">End Time:</label> 
        <div class="input-group bootstrap-timepicker timepicker"> 
        <input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" /> 
        <span class="input-group-addon"><i class="fa fa-clock-o"></i></span> 
        </div> 
       </div>    
      </div> 
     </div> 
     </div> 
    </div> 
</div>

CSS：

.span6{ 
    display: inline-block; 
    max-width: 40%; 
    margin-left: 6%; 
}

CODEPEN DEMO

來源

2015-11-08 04:09:29

感謝您的回答。如果解決方案是使用垂直表單（標籤高於控件），那麼爲什麼它需要自定義CSS？ –

由於模型只有這麼大，所以我認爲將它們放在上面會給輸入字段留出更多空間會更友好。 –

它只是爲了讓您的輸入字段內聯而簡化工作。如果你想要內聯標籤，它會從當前標記中進行一些重新格式化。 –

如何擺脫Bootstrap模式中項目之間的額外空間？

回答

相關問題