Html 引导网格布局：强制特定单元格始终位于同一行中

使用引导网格布局显示各种形式。单元格的宽度为3/12列，所有单元格都可配置。问题是标签和字段宽度应该分别配置。例如，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列的空白空间]，然后将labelB 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>);

---

如何处理此代码，使这些标签和字段始终位于同一行？

if语句如何

您可以这样做：

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

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

---

正如Troyer所说，我们不是来展示想法或做你的工作的，我们是来解决代码问题的。下次你应该试着自己解决问题，直到你陷入困境，然后提供你的代码。

你能发布一些代码吗？我们不是来向你展示想法的，我们是来解决代码问题的，没有代码我们什么都做不了。检查引导程序文档，尝试一些东西，失败或成功，然后到那里来。我确实尝试过，但被卡住了。希望有一种简单的方法将元素合并到一个不易碎的容器中，这样容器本身就不会用于宽度计算。现在我可以合理地确定没有这样的事情，我可以去寻找像你建议的那样的解决办法。非常感谢。