angularjs - 水平场

Question

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

是什么让字段水平显示？是row野外组的课吗？还是在col-xs-6各个字段上的类（仅查看名字/姓氏字段时）？

我之所以问，是因为在我的工作中，我们无法使用 twitter 引导程序（arg！），并且在不使用引导程序时，我无法像这个示例一样使字段位于同一行。

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

Answer 1

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

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

https://jsfiddle.net/6njkou1g/

Answer 2

根据您需要的浏览器支持，您可能会考虑这个根本不需要引导程序而是使用flexbox进行布局的示例。否则，Brian 所说的关于自己实现引导程序网格系统的子集的内容不会太棘手......

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/