Html R块、行和标题的布局

我正在完成我的Rshinny应用程序，我正在为块和标题的布局而挣扎。因为我有很多块，所以我单独构建了布局，并使用fluidRow和column的组合在我闪亮的应用程序的ui中进行编码。通常情况下，我的每个区块都有一个标题，在表格p（…）下，后跟一些相同表格下的信息

因为我喜欢有一个“控制”侧栏面板的想法，所以我应用程序左侧的块用于控制我在应用程序上使用的不同输入。当用户进行填充时，左侧的块是受影响和修改的块

我有一整排属于同一“类别”的区块。这是一个动态UI，根据用户可以使用的滑块输入，它可以有1到8个块。我试图实现的是在块上方有一个标题行（不管是段落还是标题，都无所谓），然后有块，同时在左侧的“控制面板”上只保留一个单元

下面是一些图片，以使其更清晰：

这是我目前大部分街区所拥有的。一行表示标题（蓝色），一行表示内容（绿色）。深绿色是一般的“行”，红色是“块”。此布局的代码如下所示：

fluidRow(
    column(4, wellPanel()),
    column(2, mainPanel(
        p("blue"),
        p("green")
    )),
    column(2, mainPanel()),
    column(2, mainPanel()),
    column(2, mainPanel())
)

现在：

这是我正在努力实现的目标，但我还未能达到这一目标。我试过几件事：

1） 对标题和内容使用不同的fluidRow。问题在于格式，因为左侧的控制框是第一行的一部分，它限制了行本身的高度，这意味着页眉将比内容高得多。看起来是这样的：，我想减少无用的空间

其语法如下：

fluidRow(
    column(4, wellPanel()),
    column(8, mainPanel(
        p("blue")
    ))
),
fluidRow(
    column(4, mainPanel()),
    column(2, mainPanel(
        p("green")
    )),
    column(2, mainPanel()),
    column(2, mainPanel()),
    column(2, mainPanel())
)

2） 将子块嵌套在较大的列中。其代码如下所示：

fluidRow(
    column(4, wellPanel()),
    column(8, mainPanel(
        p("blue"),
        column(2, mainPanel(
            p("green")
        )),
        column(2, mainPanel()),
        column(2, mainPanel()),
        column(2, mainPanel())
    ))
)

问题是，不知何故，列中的列似乎表现不正常。与其让宽度为2的列占据我的宽度为8的列的整个空间，不如让它们的宽度变得怪异，并且相互重叠

想法？可能有一个简单的HMTL解决方案，但我真的不是这方面的专家。

---

谢谢大家!

您可以将第二列拆分为四列，宽度为3。将这些列放置在

fluidRow

中也会将它们与上面的title元素对齐

---

编辑

动态生成的列和框。将盒子的宽度设置为

天花板（12个/盒子数量）

。当宽度之和超过12时，框在第二行溢出。我们必须使用类似于

天花板

或

地板

的东西，因为在引导系统中不允许分数，并且当

宽度

为1.5时，框继承父列的宽度。一个选项是将最大框宽度设置为3，并在用户选择>4个框时采用两行布局

---

代码：

库（闪亮）
欢迎来到SO。最好将图片嵌入到帖子中，而不是将其作为链接添加。谢谢您好，感谢您提出此解决方案。标题很好用，但其他内容不行。我在标题下有一个可变的块数（1到8），所以我不能花费超过1个单位的宽度。我本来希望看到占页面2/3的内容，但实际上它们使用1个单位的空间，而不管它们是否嵌套在子fluidrow中。此外，当单位数最大为8时，最后一个单位通常会出现在新行上（可能只是一个显示错误）。有趣的是，在浏览器上，页面的宽度一直在“调整”，这使得它基本上不可读。看看我的编辑是否能让你更接近。也可以查看链接中的替代方法。这很有效。我仍然得到一些浏览器版本的闪亮显示故障。这很奇怪，就像页面在“抽搐”，好像在不断地调整它的宽度，但不知道该调整哪个宽度。我在Chrome上只有75%的缩放级别有问题，其他的都可以，这很奇怪。。。我不知道到底是什么导致了这个问题。我不太熟悉，所以，我现在应该绿色勾选你的答案吗？如果你认为我的回答解决了你的问题，你可以点击勾选“接受”答案。但您也可以等待其他成员给出可能更好的解决方案。这取决于你。请看：我认为您的答案足够好（此外，您提供了两种不同的解决方案）。再次感谢！
library(shiny)

wp <- tagList(wellPanel(
  h3("Title"),
  p(
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
  )
))

ui <- fluidPage(fluidRow(
  column(
    width = 4,
    wp,
    sliderInput(
      "n_boxes",
      label = "Number of boxes",
      min = 1,
      max = 8,
      value = 2,
      step = 1
    )
  ),
  column(width = 8,
         wellPanel(h2("T I T L E")),
         uiOutput("blocks"))
))

server <- function(input, output) {
  make_boxes <- reactive({
    box_width <- ceiling(12 / input$n_boxes)
    message(box_width)

    x <-
      lapply(1:input$n_boxes, function(x)
        column(width = box_width, wp))
    x
  })

  output$blocks <- renderUI({
    fluidRow(make_boxes())
  })
}

shinyApp(ui, server)