使用窗体横向和不使用窗体横向之间的填充区别？

我正在使用bootstrap的布局，我发现一个奇怪的填充方面使用窗体横向和不使用它。使用窗体横向和不使用窗体横向之间的填充区别？

这里是有问题

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

这将产生一个新的窗口下，图像弹出的代码，发现右侧填充是如何从左侧填充不同？

现在，如果我删除的形式，水平一流，左侧填充和右侧都是平等的，看起来像下面

这个图片我不喜欢什么这张照片是标签没有居中，就像他们在形式水平的图片，但填充是平等的。

所以我的问题是为什么在左侧和右侧的形式水平不等于填充，但没有使用该类，然后左侧和权利是平等的，我如何修复填充时使用窗体，水平在右侧，以便它与左侧相等？

来源

2016-11-04 Chris

@Hopper，它的正义引导。我没有任何自定义的CSS此 – Chris

第一个div标签的类名缺少“。如果这是从您的原始源复制的，您可能想要修复该问题 –

您缺少一个行类。试试这个

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

来源

2016-11-04 19:04:41

这可行，但只有当我开始调整窗口大小时width.I是有点期待不必不断调整窗口，直到填充等于eachother – Chris

您的标记似乎是正确的。重现问题的提琴手将有助于 –

我相信，在“填充”差异的原因是没有真正padding属性。标签的宽度为16.66％，右对齐。

正如您从图片中看到的，我突出显示了元素占据的空间（红色代表标签，绿色代表div）。在你提供的第二张照片中，文字对齐是回到左侧，所以它给人的印象是空间在这个宽度上均匀分布

来源

2016-11-04 19:42:54

使用窗体横向和不使用窗体横向之间的填充区别？

回答

相关问题