閃亮的標題面板：如何將標題和圖像放在同一高度？

Question

我想要標題面板中的標題和圖像，但左側的標題和右側的圖像。 我使用以下代碼在面板中找到了它們：

ui <- fluidPage(
   titlePanel(div("Fenologische modellen", 
                   img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
   ),

但后來他們只是彼此相鄰。 因為 align 對圖像不起作用（或“style = ...”，也嘗試過），我決定將它們放在不同的列中，這首先需要一個fluidRow。

ui <- fluidPage(
  titlePanel( 
    fluidRow( 
      column(4, "Fenologische modellen"),
      column(4, offset = 8, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
    )
  ),

發生的情況是圖像確實放置在右側，但它被放置在右下角，而我需要它與標題在同一行。

我試過以像素為單位調整列的高度，但在一定高度下，它不再改變。 上圖顯示了極限。

有什么建議嗎？

PS：我不想將它們都組合在一個井板中，除非我可以使它完全變白從而不可見。

Answer 1

所以我在嘗試在 wellPanel 中解決同樣的問題時自己想通了。 壞人是column()的offset參數。 如果我刪除它，圖像和標題水平對齊。

要將圖像放在右側，我只需要使左列非常寬：

titlePanel(
  fluidRow(
    column(9, "Fenologische modellen"), 
    column(3, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
  )
),

Answer 2

怎么樣：

titlePanel(div("Fenologische modellen", 
                img(height = 105, width = 300, 
                    src = "logo_pcfruit.jpg", 
                    class = "pull-right")))

pull-right類是一個 Bootstrap 類，它似乎可以做你想做的事。

Answer 3

根據column的文檔， offset參數是

“從前一列的末尾偏移此列的列數。”

您的第一列占據 12 個單位中的 4 個單位。然后在與最后一列末尾相距 8 個單位的地方添加一列，這意味着您將在 4+8 = 12 個單位中的 12 個單位之后開始新列。因為 4 個單位 + 4 個偏移量 + 4 個單位 = 12 個單位， offset參數的正確使用是

ui <- fluidPage(
  titlePanel( 
    fluidRow( 
      column(4, "Fenologische modellen"),
      column(4, offset = 4, img(height = 105, width = 300, src = "logo_pcfruit.jpg"))
    )
  )