Bootstrap Grid and Flexbox，一列具有水平和垂直滚动

问题描述 投票：0回答：1

我有一个两列布局页面，希望它满足这些要求：

  1. 右列可以包含较大的内容数据网格，并且用户应该能够垂直和水平滚动该内容。无法将所有内容立即显示在页面上。
  2. 左栏，其宽度较小且高度较短，应始终显示在xl屏幕尺寸的页面上。
  3. 左栏有两个按钮，必须在页面底部显示xl屏幕尺寸。
  4. 页面应响应平板电脑的屏幕尺寸。在平板电脑上，右列应滑到左列下方，并且其本身仍应可水平滚动。也可以保留垂直滚动条本身（虽然不是最佳选择）。

除了使右列可水平滚动外，我还有其他工作。如何获得右侧列的水平滚动？

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>        
    <div class="container-fluid h-100">
        <div class="p-2 h-100">
            <div class="row d-flex h-100">
                <div class="col-xl-3 col-sm-12 d-flex flex-column h-100 align-items-start">
                    <h2>Left Column</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <div class="mt-auto">
                        <button href="javascript:void(0)">Button 1</button>
                        <button href="javascript:void(0)">Button 2</button>
                    </div>
                </div>
                <div class="col-xl-9 col-sm-12 d-flex flex-column h-100" align="center">
                    <h2>Right Column</h2>
                    <div class="limited mb-2">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>    
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>        
</body>
</html>

CSS：

html, body {
    height: 100%
}

.limited {
    flex-basis: 0px;
    flex-grow: 1;
    overflow-y: auto;
}
css twitter-bootstrap flexbox horizontal-scrolling
1个回答
0
投票

如果我正确地跟随您，请添加]​​>

    white-space: nowrap;

到该列应使其水平滚动而不包裹文本。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.