Question

使用Bootstrap网格布局显示各种表单。为单元分配宽度（例如，12列中的3个），并且所有单元都是可配置的。问题是标签和字段宽度应该单独配置。例如。 labelA是宽度2，fieldA是宽度4，labelB是宽度2，fieldB是宽度4.这样用户将看到“2列”布局：labelA-fieldA-labelB-fieldB。

但是，如果用户决定将标签和字段宽度设置为某个其他值，例如跨越所有行，则会出现问题。用户将标签B宽度设置为4，将字段B宽度设置为8，期望它占据整行。但是，在这种情况下，他将获得第一行的labelA-fieldA-labelB- [2列的空白空间]和第二行的fieldB。显然，预期的解决方案是使用labelA-fieldA- [6列的空白空间]，然后在下一行标记B-fieldB。同样，这都是可配置的，因此我需要针对所有情况的解决方案。

一个完美的解决方案是通过某种方式强制这些细胞（标签和区域）不易破碎。找不到办法做到这一点。

另一种方法是创建宽度= label.width + field.width的容器组件。但是我会在这些容器中设置标签和字段宽度时遇到问题，因为我只能设置相对于直接父级的标签/字段宽度，我需要设置相对于父级父级的宽度。我听说有很多方法可以在渲染中更改组件中的列数，如果我将列数设置为label.width + field.width，它就可以工作。但据我所知，这是一个肮脏的解决方案。

代码在React中，这是为每个标签和字段生成的。 InpComp可能是任何组件，最终无关紧要。 labelWidth和fieldWidth由配置设置。

const labelWidth = this.getLabelWidthFromConfiguration();
const fieldWidth = this.getFieldWidthFromConfiguration();

return (
  <div className={'component-container'}>
    <div className={'col-md-${labelWidth}'}><b>{this.field.attributes.label}</b></div>
    <div className={'col-md-${fieldWidth}'}>
      <InpComp />
    </div>
  </div>);

我可以对此代码执行哪些操作，以便这些标签和字段始终位于同一行？

Answer 1

if语句怎么样？ ;）

你可以这样做：

if (lableWidth + fieldWidth !== 6) {
    fieldWidth = 12 - lableWitdh;
}

此解决方案仅适用于一种情况（LA + FA = LB + FB = 6）。您可以使用if / else或switch-case为每个案例设置的条件。

就像Troyer所说，我们不是在这里展示想法或做你的工作，我们在这里修复代码问题。下次你应该尝试自己解决问题，直到陷入困境然后提供你的代码。

Bootstrap网格布局：强制特定单元格始终位于同一行

1 个答案: