如何摆脱 Bootstrap 模式中项目之间的额外空间？答案

【问题标题】：How do I get rid of extra space in between items in a Bootstrap modal?如何摆脱 Bootstrap 模式中项目之间的额外空间？
【发布时间】：2016-02-08 23:09:50
【问题描述】：

我正在使用引导程序的网格在模式中布局表单。标签和输入元素之间的空间太大，如果我在一行中有两个表单控件，则它们之间的空间太大。我为每个元素使用 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>

【问题讨论】：

所以你希望它们尽可能靠近左对齐？
他们必须内联吗？
我想减少标签和控件之间的空间，如果可能的话我想减少中间的空间。

标签： html css twitter-bootstrap modal-dialog bootstrap-modal

【解决方案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

【讨论】：

感谢您的回答。如果解决方案是使用垂直表单（控件上方的标签），那么为什么需要自定义 CSS？
由于模型只有这么大，我认为将它们放在上面会更友好，为输入字段留出更多空间。
它只是为了让您的输入字段内联更容易。如果您还想内联标签，则需要对当前标记进行大量重新格式化。