You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

R Shiny中如何实现两个fileInput组件并排显示

Shiny fileInput组件并排显示实现方法

fileInput组件默认携带Bootstrap表单类样式,为块级元素,仅给外层添加display:inline-block不同时控制宽度、对齐属性的情况下,依然会触发换行,两种可直接落地的实现方案如下:

方案1:使用Shiny原生栅格系统(推荐,适配响应式布局)

依托Bootstrap 12列栅格规则,在box内部嵌套fluidRow,两个fileInput各占6列宽度即可自动并排,适配不同屏幕尺寸。
核心修改代码:

box(
  title = "Import Data",
  solidHeader = TRUE, 
  collapsible = TRUE,
  width = 12,
  fluidRow(
    column(width = 6,
      fileInput(inputId = "file1",
                label = "File 1",
                multiple = TRUE,
                accept = c(".xlsx", ".txt"),
                width = '100%')
    ),
    column(width = 6,
      fileInput(inputId = "file2",
                label = "File 2",
                multiple = TRUE,
                accept = c(".xlsx", ".txt"),
                width = '100%')
    )
  )
)

方案2:自定义inline-block样式

如果不需要响应式适配,直接给每个fileInput的外层div补充宽度、对齐属性即可:

box(
  div(style = "display:inline-block; width:48%; vertical-align:top;", 
      fileInput("file1", "File 1", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%')),
  div(style = "display:inline-block; width:48%; vertical-align:top;", 
      fileInput("file2", "File 2", multiple = TRUE, accept = c(".xlsx", ".txt"), width = '100%')) 
)

宽度设为48%是为了预留间距避免两个组件总宽度超过容器宽度触发换行,可根据实际需求调整。

完整可运行示例(基于方案1修改):

library(shiny)
library(shinydashboard)

## Header
Header = dashboardHeader(title = "解决并排问题", titleWidth = 250)

## Sidebar
SideBar = dashboardSidebar(sidebarMenu(menuItem(text = "测试页面",tabName = "Menu", startExpanded = TRUE)))

## Tab & Body
Tab = tabItem(tabName = "Menu",
              fluidRow(
                box(
                  title = "Import Data",
                  solidHeader = TRUE, 
                  collapsible = TRUE,
                  width = 12,
                  fluidRow(
                    column(width = 6,
                           fileInput(inputId = "file1",
                                     label = "File 1",
                                     multiple = TRUE,
                                     accept = c(".xlsx", ".txt"),
                                     width = '100%')
                    ),
                    column(width = 6,
                           fileInput(inputId = "file2",
                                     label = "File 2",
                                     multiple = TRUE,
                                     accept = c(".xlsx", ".txt"),
                                     width = '100%')
                    )
                  )
                )
              ))

Body = dashboardBody(tabItems(Tab))

## UI
ui = dashboardPage(header = Header,
                   sidebar = SideBar,
                   body = Body,
                   skin = "red")

## Server
server = function(input, output, session){

}

## ShinyApp
shinyApp(ui,server)

内容的提问来源于stack exchange,提问作者Alejo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 13:45:03