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

如何在Bootstrap模式中删除项目之间的额外空间？

1 个答案: