如何使用bslib实现Card 3占满整行的三卡片布局

嘿，我来帮你搞定这个布局问题！你想要的效果是Card 1和Card 2在第一行分栏排列，Card 3单独占满整个第二行，对吧？其实只需要调整layout_columns里的col_widths参数就能轻松实现。

你原来的代码里col_widths = c(4, 8)只定义了两个宽度值，第三个卡片会默认循环使用这个序列，导致布局不符合预期。我们只需要给第三个卡片指定全宽的列数（也就是12，因为Bootstrap网格系统总共有12列），就能让它单独占满一行。

下面是修改后的完整代码，我标注了关键的调整部分：

ui_dashboard_instructor2 <- page_navbar(
  # Header ----------------------------------------------
  header = div(),
  
  # Title ----------------------------------------------
  title = "Title",
  
  # Sidebar ----------------------------------------------
  sidebar = sidebar(
    width = 350
  ),
  
  # Navigation panels ----------------------------------------------
  ## 1.
  nav_panel(
    "Overview",
    layout_columns(
      ### 修改col_widths，给第三个卡片设置全宽12列
      col_widths = c(4, 8, 12),
      row_heights = c(1, 2),
      
      ### 1.
      card(
        full_screen = TRUE,
        card_header(
          "Card 1"
        ),
        card_body(
        )
      ),
      
      ### 2.
      card(
        full_screen = TRUE,
        card_header(
          "Card 2"
        ),
        card_body(
        )
      ),
      
      ### 3.
      card(
        full_screen = TRUE,
        card_header(
          "Card 3"
        ),
        card_body(
        )
      )
    )
  ),
  
  ## 2.
  nav_panel(
    "Second panel",
  ),
  
  ## Space between sections and sign out button
  nav_spacer(),
  
  ## 3. Sign out button
  nav_item(
    uiOutput("sign_out_button")
  )
)

简单解释下：

• col_widths = c(4, 8, 12)：前两个卡片分别占4列和8列，加起来刚好12列，会排在同一行；第三个卡片占12列，自动单独占满一整行。
• row_heights = c(1, 2)：保持你原来的设置，第一行高度比例为1，第二行（Card3所在行）高度比例为2，这样Card3会比前两个卡片更高一些。

如果之后你想调整卡片的宽度比例，只需要修改前两个数值（只要加起来等于12就行），第三个保持12就能维持全宽效果啦！

备注：内容来源于stack exchange，提问作者umair durrani