如何使用引导程序的网格列来设置 X-Editable 输入的宽度？

Question

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

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

引导

将输入包装在网格列或任何自定义父元素中，以轻松实施所需的宽度。

<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）

我在这里创建了一个小提琴来演示这个问题：http://jsfiddle.net/NfPcH/10908/。

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

Answer 1

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

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

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" 应用于可编辑元素来删除它们。

最后，我们在控制器中分配表单类（需要注意的是，每个范围内的所有输入都将具有相同的列数）：

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

这让我们大部分时间到达那里，但有一些填充奇怪。这是因为表单及其父级都有列类。我通过将row 类添加到输入的父级来破解它：

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

更新的小提琴在这里：http://jsfiddle.net/NfPcH/10933/。希望这会有所帮助！