在此引导示例中，在调整大小时，对齐的原因是什么

Question

我在这个jsfiddle中有一个引导程序表单和一个简单的标签+文本框组合。

<div class="form-group">
    <label class="col-md-4 control-label" for="af_Email">Email</label>
    <div class="col-md-4">
        <input id="af_Email" readonly="readonly" name="af_Email" 
            placeholder="" class="form-control input-md" 
            required="" value="frizzo@hotmail.com" type="email">
    </div>
</div>

当页面展开时（假设在col-md- *范围内），标签右对齐，边距良好，页面看起来很好。

当我将页面缩小到比col-md- *更小的值时，标签保持对齐，面板的边距不存在，看起来不专业：

当页面尺寸小于col-md时，如何添加边距（在面板的两侧） - *？

作为一个奖金问题，有人可以解释在引导程序中定义或记录此行为的位置吗？

Answer 1

您似乎错过了在.col-md-12之前添加.form-group。

以下是更新：https://jsfiddle.net/ttb0xtn0/1/