html - 在此 Bootstrap 示例中，调整大小时如何解释对齐方式

Question

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

<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-* 时，如何添加边距(在面板的两侧)？

作为奖励问题，有人可以解释在 bootstrap 中定义或记录此行为的位置吗？

Answer 1

看起来你错过了在 .form-group 之前添加 .col-md-12。

这是更新:https://jsfiddle.net/ttb0xtn0/1/