水平场

Question

看这个例子：http://angular-formly.com/#/example/bootstrap-specific/advanced-layout

是什么让字段水平显示？是字段组上的rowclass吗？还是在 col-xs-6 class 个别字段上（仅查看 First/Last 名称字段时）？

我问是因为在我的工作中我们无法使用推特 bootstrap（arg！）而且当不使用 bootstrap.

是否必须使用 bootstrap classes 才能获得同一行的字段？

Answer 1

CSS。它们被包裹在 div 中并应用了 col-xs-6 class。 class 向左浮动，宽度为 50%。

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

https://jsfiddle.net/6njkou1g/

Answer 2

对两列使用 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/

Answer 3

根据您需要的浏览器支持，您可以考虑this example which doesn't require bootstrap at all and instead uses flexbox进行布局。否则，Brian 所说的自己实现 bootstrap 网格系统的一个子集就不会太棘手...

水平场

Horizontal Fields

twitter-bootstrap

angularjs

angular-formly