在同一行中对齐表单输入



所以我有这个我创建的Symfony Form,其中有这3个相互关联的输入。我正在尝试将它们三个对齐在同一行中,以使其看起来更好。这是我的代码:FormType

<?php
namespace AppForm;
use SymfonyComponentFormExtensionCoreTypeTextType;
use SymfonyComponentFormExtensionCoreTypeDateType;
use SymfonyComponentFormExtensionCoreTypeTimeType;
use AppEntityTypeParking;
use SymfonyComponentFormAbstractType;
use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentOptionsResolverOptionsResolver;
class TypeParkingType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('libelle')
            ->add('tempsmax')
            ->add('jourdebut')
            ->add('jourfin')

//these three are the fields that I'm trying to put into a single line
            ->add('jourstravail_jour', TextType::class, ['property_path' => 'jourstravail[jour]'])
            ->add('jourstravail_debut', TextType::class, ['property_path' => 'jourstravail[debut]'])
            ->add('jourstravail_fin', TextType::class, ['property_path' => 'jourstravail[fin]'])

            ->add('Exception_Name', TextType::class, ['property_path' => 'exception[name]'])
            ->add('Starting_date', TextType::class, ['property_path' => 'exception[datedebut]'])
            ->add('Ending_date', TextType::class, ['property_path' => 'exception[datefin]'])
            ->add('Starting_time', TextType::class, ['property_path' => 'exception[heuredebut]'])
            ->add('Ending_time', TextType::class, ['property_path' => 'exception[heurefin]'])
        ;
    }
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => TypeParking::class,
        ]);
    }
}

这是我的 _form.html.twig 文件

{{ form_start(form) }}
    {{ form_row(form.libelle, { 'label': 'Label' }) }}
    {{ form_row(form.tempsmax, { 'label': 'Max Time' }) }}
    {{ form_row(form.jourdebut, { 'label': 'Start Date' }) }}
    {{ form_row(form.jourfin, { 'label': 'Ending Date' }) }}
    <h3>these are the fields</h3>
    {{ form_row(form.jourstravail_jour, { 'label': 'Day' }) }}
    {{ form_row(form.jourstravail_debut, { 'label': 'start' }) }}
    {{ form_row(form.jourstravail_fin, { 'label': 'end' }) }}
    <h3>Exception</h3>
    {{ form_row(form.Exception_Name, { 'label': 'Exception Name' }) }}
    {{ form_row(form.Starting_date, { 'label': 'Starting Date' }) }}
    {{ form_row(form.Ending_date, { 'label': 'Ending Date' }) }}
    {{ form_row(form.Starting_time, { 'label': 'Starting Time' }) }}
    {{ form_row(form.Ending_time, { 'label': 'Ending Time' }) }}


    <button class="btn">{{ button_label|default('Save') }}</button>
{{ form_end(form) }}

我尝试格式化的字段是 jourstravail_jourjourstravail_debutjourstravail_fin

这是一个基于我的评论的答案,似乎对您有所帮助,因此您可以将问题标记为已回答。

你可以"正常"使用它,通过使用form_label()form_widget()(不确定这个(并用 Bootstrap 类包装它们。

或者,您可以自定义form_row()行为,并将类包含在您自己的表单模板中。

最新更新