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

Question

我正在使用 angular-xeditable, the Angular flavor of X-Editable. I'm trying to adjust the input width using Bootstrap's grid column classes。

类似的问题 x-editable - adjusting the width of input field 提供了使用自定义 styles/classes 更改宽度的解决方案，但我想合并 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 列 class.

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

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

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

这让我们完成了大部分的工作，但是有一些奇怪的填充。这是因为表单及其父项都有列 classes。我通过将 row class 添加到输入的父级来破解它：

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

更新后的 fiddle 在这里：http://jsfiddle.net/NfPcH/10933/。希望这对您有所帮助！

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

How can I use bootstrap's grid columns to set the width of X-Editable inputs?

twitter-bootstrap

angularjs

x-editable

twitter-bootstrap-3

Bootstrap

X-可编辑

演示（JSFiddle）