html - 如何摆脱 Bootstrap 模式中元素之间的额外空间？

Question

我正在使用 bootstrap 的网格在模式中布置表单。标签和输入元素之间的空间太大，如果我在一行中有两个表单控件，则它们之间的空间太大。我为每个元素使用 3 列，对其中任何一个都使用更少的列，并且我得到了自动换行或剪裁。

<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>

Answer 1

我已经更改了您的 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