css - Bootstrap 3 : form label position depending on master column

Question

我在 bootstrap 中设计一个模块，我希望根据主列的宽度在表单中设置标签的位置。使用 col-sm-*、col-md-* 等位置(作为大小的结果)取决于屏幕宽度，而不是母版宽度.有没有办法做到这一点？

例如:

<div class="form-group">
    <label class="col-xs-12 col-sm-6 col-md-2 control-label" for="MyId">Label</label>  
    <div class="col-xs-12 col-sm-6 col-md-8">
      <input id="MyId" name="MyName" type="text" placeholder="Placeholder" class="form-control input-md" value=""></div>
    </div>
</div>

在所有屏幕尺寸上都表现良好，但如果我将这部分包含在一个框中，它没有足够的空间放置标签，因此它不会将标签放在输入字段上方。

除了:“将 col-md-2 和 col-md-8 都更改为 col-md-12 之外还有其他可能性吗？ ”？这是因为在一个大框中，标签不在输入字段的前面。我正在寻找一种替代方法，在这种方法中，我可以为在小盒子和大盒子中具有不同行为的表单组使用相同的代码。

提前致谢!

Answer 1

使用col-md-offset-2:

<div class="form-group">
      <label class="col-xs-12 col-sm-6 col-md-2 col-md-offset-2 control-label " for="MyId">Label</label>  
    <div class="col-xs-12 col-sm-6 col-md-8">
      <input id="MyId" name="MyName" type="text" placeholder="Placeholder" class="form-control input-md" value="">
    </div>
</div>

您还可以水平对齐标签文本:text-right 或 text-left 或 text-center