Я использую жидкое расположение строк и столбцов в блестящем приложении.Когда я уменьшаю размер экрана, элементы в двух столбцах перекрываются.Если они представляют собой два разных столбца и используют ряд жидкости, содержимое не должно перекрываться.Ниже приведен код.У меня есть два столбца шириной 4 и 8. Кажется, что они работают нормально при обычном размере экрана, но как только я сверну окно, они перекрываются.
library(shiny)
library(shinyjs)
ui <- navbarPage(
"Bootstrap scrollspy on multiple tabs",
id = "navbar",
header = div(
useShinyjs(),
extendShinyjs("www/app-shinyjs.js", functions = c("updateScrollspy")),
includeCSS("www/app.css"),
includeScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js")
),
# tab 1 contains 4 sections and a scrollspy on the left with text
tabPanel(
"tab1",
div(id = "tab1-content",
fluidRow(
column(
4,
div(
id = "tab1-scrollspy",
class = "potential-scrollspy",
tags$ul(
class = "nav nav-pills nav-stacked",
tags$li(tags$a(href = "#section1-1", "Section 1-1")),
tags$li(tags$a(href = "#section1-2", "Section 1-2")),
tags$li(tags$a(href = "#section1-3", "Section 1-3")),
tags$li(tags$a(href = "#section1-4", "Section 1-4"))
)
)
),
column(
8,
div(id = "section1-1",
class = "scrollspy-section",
p('Section 1-1')
),
div(id = "section1-2",
class = "scrollspy-section",
p('Section 1-2')
),
div(id = "section1-3",
class = "scrollspy-section",
p('Section 1-3')
),
div(id = "section1-4",
class = "scrollspy-section",
p('Section 1-4')
)
)
)
)
),
# tab 2 contains 3 sections and a scrollspy on the right without text
tabPanel(
"tab2",
div(id = "tab2-content",
fluidRow(
column(
8,
div(id = "section2-1",
class = "scrollspy-section",
p('Section 2-1')
),
div(id = "section2-2",
class = "scrollspy-section",
p('Section 2-2')
),
div(id = "section2-3",
class = "scrollspy-section",
p('Section 2-3')
)
),
column(
4,
div(
id = "tab2-scrollspy",
class = "potential-scrollspy",
`data-offset` = 50,
tags$ul(
class = "nav nav-pills nav-stacked",
tags$li(tags$a(href = "#section2-1")),
tags$li(tags$a(href = "#section2-2")),
tags$li(tags$a(href = "#section2-3"))
)
)
)
)
)
)
)
server <- function(input, output, session) {
# when changing tabs, update the scrollspy control
observeEvent(input$navbar, {
js$updateScrollspy(input$navbar)
})
}
shinyApp(ui = ui, server = server)
Размер экрана уменьшен: 
// initialize common scrollspy control
shinyjs.init = function() {
$('body').scrollspy({ target: '.active-scrollspy' });
}
// update the active scrollspy control and refresh so that it will function
shinyjs.updateScrollspy = function(tab) {
// make all scrollspy controls inactive
$('active-scrollspy').removeClass('active-scrollspy');
// get the content in the current tab
var $tabContent = $('#' + tab + '-content');
if ($tabContent.length) {
// find the scrollspy control in the current tab
var $scrollspy = $tabContent.find('.potential-scrollspy');
if ($scrollspy.length) {
// mark the scrollspy in the current tab as active
$scrollspy.addClass('active-scrollspy');
// figure out the offset for this scrollspy
var offset = 0;
if ($scrollspy.data('offset')) {
offset = $scrollspy.data('offset');
}
// update the scrollspy object
$('body').data('bs.scrollspy').options.offset = offset;
$('body').scrollspy('refresh');
// unbind click events and re-bind clicks to animate scrolling
$scrollspy.unbind('click.scrollto');
$scrollspy.bind('click.scrollto', 'ul li a', function(event) {
event.preventDefault();
$.scrollTo(event.target.hash, 500, {
offset: -offset
});
});
}
}
}
#tab1-content .scrollspy-section {
height: 500px;
border: 1px solid #DDD;
}
#tab1-scrollspy {
position: fixed;
}
#tab1-scrollspy li > a {
background-color: #FFF;
}
#tab1-scrollspy li > a:hover {
background-color: #EEE;
}
#tab1-scrollspy li.active > a {
background-color: #AAA;
}
#tab2-content .scrollspy-section {
height: 900px;
border: 1px solid #DDD;
}
#tab2-scrollspy {
position: fixed;
top: 300px;
}
#tab2-scrollspy li > a {
padding: 0;
width: 15px;
height: 15px;
background-color: #DDD;
margin-bottom: 5px;
}
#tab2-scrollspy li > a:hover {
background-color: #AAA;
}
#tab2-scrollspy li.active > a {
background-color: #444;
}