Laravel Nova（Vite环境）多字段单行显示实现方法问询

方法一：用Nova自带的width()方法（最推荐） #

Nova原生支持通过width()方法控制字段的宽度比例，直接在字段定义里设置就能实现并排，完全不需要额外改样式或配置。

比如要把FirstName和LastName各占一行的一半，在资源的fields()方法里这么写：

public function fields(NovaRequest $request)
{
    return [
        // 两个字段各占1/2宽度，自动并排
        Text::make('First Name')
            ->width('1/2'),
        Text::make('Last Name')
            ->width('1/2'),
        
        // 其他字段正常写就行
        Text::make('Email')->rules('required', 'email'),
    ];
}

支持的比例值包括：1/2、1/3、2/3、1/4、3/4、full（默认），根据需求选就行。如果要做响应式适配，还可以用responsiveWidth()，比如->responsiveWidth('1/2', 'full')，意思是桌面端占1/2宽度，移动端自动占满整行。

方法二：自定义CSS实现更灵活的布局 #

如果自带的宽度比例满足不了你的需求（比如要自定义间距、不同的宽度占比），可以用自定义CSS配合Vite来实现：

1. 先在项目的resources/css目录下创建nova.css文件，添加自定义样式：

/* 自定义并排字段容器 */
.inline-fields-group {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

/* 让每个字段占对应比例 */
.inline-fields-group .form-group:nth-child(1) {
    flex: 2; /* 第一个字段占2份宽度 */
}
.inline-fields-group .form-group:nth-child(2) {
    flex: 1; /* 第二个字段占1份宽度 */
}

2. 在app/Providers/NovaServiceProvider.php的boot()方法里注册这个样式文件：

use Laravel\Nova\Nova;

public function boot()
{
    parent::boot();

    // 注册自定义Nova样式
    Nova::style('custom-nova-styles', resource_path('css/nova.css'));
}

3. 最后在资源的字段里用Fieldset包裹需要并排的字段，并给容器加自定义类：

public function fields(NovaRequest $request)
{
    return [
        Fieldset::make('Full Name', [
            Text::make('First Name'),
            Text::make('Last Name'),
        ])->extraAttributes(['class' => 'inline-fields-group']),
        
        // 其他字段...
    ];
}

注意事项 #

• 复杂字段（比如关联选择器、文件上传）也可以用width()方法设置宽度，但要确保字段本身的布局不会冲突；
• 如果字段有必填标记或错误提示，Nova会自动适配宽度，不需要额外处理；
• 用Vite的话，不需要管webpack.mix.js，直接按上面的方式引入自定义CSS就行，Nova会自动加载。

内容的提问来源于stack exchange，提问作者webfreaks