闪亮 - 手机上没有并排布局

Question

我正在使用并排布局在同一行上显示多个图。但是它在移动设备上看起来很糟如何在桌面上保持并排布局，但在移动设备上每行1个图？

fluidRow(
  splitLayout(cellWidths = c('49%', '49%'),
    plotlyOutput('pWaterLvl'),
    plotlyOutput('pHumidity')
  )
),
fluidRow(
  splitLayout(cellWidths = c('49%', '49%'),
    plotlyOutput('pWaterTemp'),
    plotlyOutput('pAirTemp')
  )
)

Answer 1

我认为你可以让bootstrap网格系统处理它。

fluidRow(
  column(6, plotlyOutput('pWaterLvl')),
  column(6, plotlyOutput('pHumidity')) 
)

Answer 2

如果需要控制多个设备上的网格大小，可以使用宽度和类设置的组合（默认情况下为宽度控件'col-sm'）。

此示例将图表放在小屏幕上，在中等屏幕上彼此相邻，并使第二个图表在大屏幕上略宽。

fluidRow(
  column(12, class = "col-md-6 col-lg-5", plotlyOutput('pWaterLvl')),
  column(12, class = "col-md-6 col-lg-7", plotlyOutput('pHumidity')) 
)