Question

这就是我希望电话和分机在form

中对齐的方式

这就是我为电话和分机row所写的内容：

            <div class="row form-group">
                <label class="control-label col-md-2" for="phone">Phone</label>
                <div class="col-md-6">
                    <input class="col-md-5" id="AdminPhone" name="AdminPhone" type="text" value="" placeholder="(999) 999-9999">
                    <div class="form-group col-md-7 pull-right">
                        <label class="control-label  col-md-1" style="text-align: right" for="AdminExt">Ext</label>
                        <input class="col-md-6 pull-right" id="AdminExt" name="AdminExt" type="text" value="" placeholder="1234">
                    </div>
                </div>
            </div>

这就是它开始的样子

或者像这样：

我不知道我应该如何构建它才能正常工作？

另外，例如上面的电子邮件部分工作正常就是这样：

            <div class="row form-group">
                <label class="control-label col-md-2" for="Email">Email</label>
                <div class="col-md-6">
                    <input id="AdminEmail" name="AdminEmail" type="text" value="" style="width: 100%" placeholder="Email">
                    <span class="glyphicon glyphicon-envelope  form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>
                </div>

                <div class="col-md-4">
                    <div>
                        <input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
                        <label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
                    </div>
                </div>
            </div>

Answer 1

由于您使用的是 let workoutKey = keys[indexPath.row] cell.workoutDescLabel.text workout[workoutKey]?.joinWithSeparator(", ")`?适用于中型设备，因此您必须同时使用col-md-*（适用于小型设备），甚至col-sm-* （对于超小型设备）

但是，我建议您查看Forms Bootstrap Docs，因为您的表单非常复杂，根本不需要使用col-xs-*。

查看文档的基本演示：

.col-

Answer 2

无需使用pull-right。

MvvmCross ViewModel Creation documentation

如果您查看文档，则会显示formgroup容器重置列计数。

应用与文档相同的结构：

<div class="row">
  <form class="form-horizontal">
    <div class="form-group col-md-6">
      <label class="control-label col-md-2">test</label>
      <div class="col-md-10">
        <input class="form-control" type="text">
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class="control-label col-md-2">test</label>
      <div class="col-md-10">
        <input class="form-control" type="text">
      </div>
    </div>
  </form>
</div>

如果您希望移动设备使用相同的结构，则应使用col-xs-*或col-sm-*代替col-md-*来测量列。

示例：http://getbootstrap.com/css/#forms

为什么bootstrap网格系统不遵循列大小

2 个答案: