Yesod에서 양식 요소를 가로로 정렬하십시오.

저는 하나의 텍스트 상자와 라디오 버튼으로 구성된 여러 행을 가져야하는 양식을 Yesod에서 작성합니다. renderBootstrap3도 사용하고 있습니다.Yesod에서 양식 요소를 가로로 정렬하십시오.

는 지금은이 :

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의 모든 것을 다음 줄에 넣고 싶다. 어떻게해야합니까?

출처

2014-07-13 user3776949

[BootstrapHorizontalForm] (http://hackage.haskell.org/package/yesod-form-1.3.11/docs/Yesod-Form-Bootstrap3.html#v:BootstrapHorizontalForm)을 사용해 보셨습니까? –

BootstrapHorizontalForm을 보았지만이 경우 어떻게 사용하는지 즉시 알 수 없습니다. 예를 들어, 각 행은 가로형이 될 것이고, 그런 다음 기본형과 결합 할 것인가? 그렇다면 어떻게해야합니까? – user3776949

나는 Yesod의 부트 스트랩 3 모듈은 세 가지 표준 양식 유형을 지원하기 때문에 당신 만 renderBootstrap3으로 원하는 동작을 달성 할 수없는 일^{생각 : 기본 (행 당 폼 요소), 인라인 한 행 (모든, 라벨 없음) 및 가로 (레이블 + 행당 양식 요소). 프로그래밍 방식으로 한 줄에 두 개의 폼 요소가 필요하기 때문에 폼 요소에 추가 클래스 특성을 적용하고 CSS로 스타일을 지정하는 것이 가장 쉬운 솔루션이라고 생각합니다.}

¹ 내가 this article와 부트 스트랩 3 지원을 시작한 이후로는 생각 , 아무것도하지만, 그 이상으로 부트 스트랩 3 기능 변경 있는지 확실하지 않습니다. 편리하게도 하단의 예에서 폼 예제를 볼 수 있지만 Yesod의 Bootstrap 3 지원은이 기사에서와 약간 다른 API를 가지고 있음에 유의하십시오.

출처

2014-07-14 22:14:05

양식 요소에 CSS 클래스를 추가하려면 어떻게해야합니까? – user3776949

runInputPost와 함께 입력 폼을 사용하고 모든 html을 직접 지정했습니다. – user3776949

Yesod에서 양식 요소를 가로로 정렬하십시오.

답변

관련 문제