在Yesod中水平对齐表单元素

Question

我在Yesod中构建一个表单，需要有多行，包括单个文本框和单选按钮。我也在使用renderBootstrap3。

现在我有：

Form = renderBootstrap3 BootstrapBasicForm $ Params
    <$> aopt textField "Car1Name" Nothing
    <*> areq (radioFieldList colorList) "Car1Color" (Just "red")
    <$> aopt textField "Car2Name" Nothing
    <*> areq (radioFieldList colorList) "Car2Color" (Just "red")

问题是所有内容都是垂直显示的。我想在一排汽车1的一切，以及下一排汽车2的一切。我怎么能这样做？

Answer 1

我认为 ¹ 只能使用renderBootstrap3来实现所需的行为，因为Yesod的Bootstrap 3模块支持三种标准表单类型：basic（每行的表单元素），内联（一行中的所有内容，没有标签）和水平（每行标签+表单元素）。由于每行需要两个表单元素，以编程方式，在单个表单中，我认为应用其他类属性来形成元素并使用CSS设置样式应该是最简单的解决方案。

---

¹ 我想，因为我使用this article启动了Bootstrap 3支持，但我不确定Bootstrap 3功能之外是否有任何改变。方便的是，您可以在底部的示例中看到表单示例，但请注意Yesod的Bootstrap 3支持的API与该文章略有不同。