使用form-horizo​​ntal和不使用form-horizo​​ntal之间的填充差异？

Question

我正在使用bootstrap进行布局，我发现在使用form-horizo​​ntal而不使用它时会出现奇怪的填充。

这是有问题的代码

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="form-horizontal">
  <div class="col-md-12">
    <div class="form-group">
      <label for="ddOrderType" class="control-label col-md-2">Order Type</label>
      <div class="col-md-4">
        <select id="ddOrderType" class="form-control"></select>
      </div>
      <label for="ddOrderType" class="control-label col-md-2">Zone</label>
      <div class="col-md-4">
        <select id="ddDiscountZone" class="form-control"></select>
      </div>
    </div>
    <div class="form-group">

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这会产生下面的图像，在新窗口中弹出，请注意右侧边距与左侧边距的不同？

现在，如果我删除了form-horizo​​ntal类，左边和右边的填充是相等的，如下图所示

我在这张照片中不喜欢的是标签不像它们在水平形式的图片中那样居中，但填充是相同的。

所以我的问题是为什么表格中的填充 - 水平在左侧和右侧不相等，但是没有使用该类，则左侧和权限相等，如何在使用表格水平时修复填充在右侧，以便它与左边相等？

Answer 1

我认为“填充”差异的原因实际上不是填充属性。标签的宽度为16.66％，并且右对齐。

从图中可以看出，我突出显示了元素占用的空间（标签为红色，div为绿色）。 在您提供的第二张图片中，text-align向左移动，因此它给出了空间在该宽度上均匀分布的印象

Answer 2

您缺少行类。试试这个

<div class="form-horizontal>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label for="ddOrderType" class="control-label col-md-2">Order Type</label>
                <div class="col-md-4">
                    <select id="ddOrderType" class="form-control"></select>
                </div>
                <label for="ddOrderType" class="control-label col-md-2">Zone</label>
                <div class="col-md-4">
                    <select id="ddDiscountZone" class="form-control"></select>
                </div>
            </div>
            <div class="form-group">

            </div>
        </div>
    </div>
</div>