Question

我有这段代码（jsfiddle - 确保你拉伸“演示”框架足够按钮在一行上）：

<div class="table">
  <div class="cell">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  </div>
  <div class="cell">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
  </div>
  <div class="cell">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
  </div>
  <div class="cell">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
  </div>
</div>

第一行是表单，第二行是表单外部的按钮，用于指示列的位置。如您所见，表单中的选择下拉菜单与其下方的按钮不对齐。下拉左边框与按钮的关系不同。为什么会发生这种情况，有没有办法解决这个问题？感谢。

Answer 1

=IIf(Sum([numclientsM])<>0,Avg([numclientsM]),"0.0")元素添加负边距以说明Bootstrap的.row定义中使用的填充。 .col-*表单也可以这样做，因此您不应将.form-horizontal元素包含在<form>中。

按如下方式更新您的标记：

<div class="row">

此外，使用<div class="container"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="pfSel" class="col-sm-2 control-label">Select Product Family:</label> <div class="col-sm-4"> <select class="form-control" id="pfSel"></select> </div> <label for="pidSel" class="col-sm-2 control-label">Select PID:</label> <div class="col-sm-4"> <select class="form-control" id="pidSel"></select> </div> </div> </form> <div class="row"> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> <div class="col-sm-1"><button type="button" class="btn btn-primary pull-left"></button></div> </div> </div>或类似的CSS属性来添加空格，而不是margin标记。

jsFiddle Demo

Bootstrap表单列与非表单列不对齐？

1 个答案: