如何使用bootstrap的网格列设置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结合使用？

1 个答案:

答案 0 :(得分：2)

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

首先，我们不能将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"应用于可编辑元素来删除它们。

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

$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/。希望这有帮助！

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

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

$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/。希望这有帮助！