angularjs - 如何使用 bootstrap 的网格列来设置 X-Editable 输入的宽度？

Question

我正在使用angular-xeditable ， X-Editable 的 Angular 风格。我正在尝试使用 Bootstrap's grid column classes 调整输入宽度。

类似的问题，x-editable - adjusting the width of input field ，提供了使用自定义样式/类更改宽度的解决方案，但我想合并 Bootstrap 的网格系统。

Bootstrap

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-4">
    <input type="text" class="form-control">
  </div>
</div>

col-xs-4 存在于父 div 上，而不是输入本身。

X-可编辑

X-Editable 渲染表单的结构:

<a>hidden</a>
<form>
  <div>
    <input/>
  </div>
</form>

并将自定义样式应用于输入。

演示(JSFiddle)

我创建了一个 fiddle 来演示这里的问题:http://jsfiddle.net/NfPcH/10908/ 。

如何将 Bootstrap 的列网格宽度与 X-Editable 合并？

Answer 1

我遇到了一些问题，但我设法找到了解决方案。

首先，我们不能将 form-inline 与 Bootstrap 的列网格系统一起使用。要删除它，我们必须覆盖 X-Editable 中的表单模板。我们还需要添加一种可配置的方式来应用 Bootstrap 列类。

yourAppName.run(function(editableOptions, editableThemes) {
  editableOptions.theme = 'bs3';
  editableThemes.bs3.formTpl = '<form class="editable-wrap" role="form" ng-class="xformClass"></form>';
});

因为我们删除了 form-inline，所以我们无法使用 X-Editable 的内置按钮。我们可以通过将 buttons="no" 应用于可编辑元素来删除它们。

最后，我们在 Controller 中分配表单类(需要注意的是，每个范围的所有输入都将具有相同的列数):

$scope.xFormClass = "col-sm-12";

这让我们完成了大部分工作，但是有一些填充的奇怪之处。这是因为窗体及其父窗体都有列类。我通过将 row 类添加到输入的父级来破解它:

editableThemes.bs3.controlsTpl = '<div class="editable-controls form-group row" ng-class="{\'has-error\': $error}"></div>';

更新的 fiddle 在这里:http://jsfiddle.net/NfPcH/10933/ 。希望这有帮助!