Question

查看此示例：http://angular-formly.com/#/example/bootstrap-specific/advanced-layout

字段水平显示的原因是什么？它是字段组中的/Users/A/B/C\\ D/E # always remember that R requires \\, not \类吗？或者在各个字段的row类中（仅查看名字/姓氏字段时）？

我在问我，因为在我的工作中我们无法使用twitter bootstrap（arg！）而且我在使用bootstrap时无法使字段与此示例相同。

您是否必须使用引导类才能在同一行上获取字段？

Answer 1

CSS。它们包含在应用了col-xs-6类的div中。该类左侧浮动，宽度为50％。

.col-xs-6 {
   width:50%;
   float:left;
}

https://jsfiddle.net/6njkou1g/

Answer 2

根据您需要的浏览器支持，您可能会考虑this example根本不需要引导程序，而是使用flexbox进行布局。否则，Brian所说的关于自己实现一部分bootstrap网格系统的说法不会太棘手......

Answer 3

将col-xs-6用于两列。

  <form class="form">
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
            </div>
        </div>
    </form>

<强> http://jsfiddle.net/rwfje779/

水平字段

3 个答案: