使用 Bootstrap 4 在 Electron 中折叠布局答案

【问题标题】：Layout collapsed in Electron using Bootstrap 4使用 Bootstrap 4 在 Electron 中折叠布局
【发布时间】：2019-03-09 13:20:59
【问题描述】：

我正在构建一个布局如下的 Electron 应用程序：

|标题栏 |

|第 1 列|第 2 列|第 3 列|

|底栏 |

主视图中固定的顶部和底部栏之间将有 3 列，而 3 列是 y 可滚动的，并且每列都嵌入了单独的 html。

这是我的布局的 html 和 SCSS 代码，但所有列都粘在顶部并被标题栏隐藏，底部栏甚至没有显示。有什么想法可以解决这个问题吗？谢谢！

HTML

<body>
    <div id="top-bar" class="row h-15">
    app title
    </div>

    <div class="container-fluid">
        <div id="main-screen" class="row">
            <div id="main-col-1" class="col-4 main-col">
                <button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
            </div>
            <div id="main-col-2” class="col-4 main-col">
                <button id="btn-img-2” type="button" class="btn btn-img btn-lg">btn 2</button>
            </div>
            <div id="main-col-3” class="col-4 main-col">
                <button id="btn-img-3” type="button" class="btn btn-img btn-lg">btn 3</button>
           </div>
       </div>
    </div>

    <div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">
    </div>
</body>

SCSS

html {
}

body {
    min-width: map-get($base, width);
    background-color: map-get($base, background);
    overflow-x: hidden;
}

#main-screen{
    display:block;
    position:relative;
}

.main-col{
    padding: 0em;
    height: 100%;
    color: #3d02bd;
    overflow-y:scroll;
}

#main-col-1{
    background-color: #e25bff;
}

#main-col-2{
    background-color: #ddb1ff;
}

#main-col-3{
    background-color: #fbefff;
}

.btn-img{
    color: #ffffff;
    background-color:#3d02bd;
}

#top-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    margin-bottom: 0;
    background-color: #2a095f;
    color:#ffffff;
    border: 0;
    font-size: 3.5em;
    letter-spacing: 0.1em;
    opacity: 0.9;
  }

#bottom-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    background-color: #3d02bd;
    color:#ffffff;
    border: 0;
    font-size: 2.5em;
    letter-spacing: 0.1em;
  }

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 frontend

【解决方案1】：

检查此代码

也改” to "

html {
}

body {
    min-width: map-get($base, width);
    background-color: map-get($base, background);
    overflow-x: hidden;
}

#main-screen{
    display:block;
    position:relative;
}

.main-col{
    padding: 0em;
    height: 100%;
    color: #3d02bd;
    width:33.33%;
    float:left;
    overflow-y:scroll;
}

#main-col-1{
    background-color: #e25bff;
}

#main-col-2{
    background-color: #ddb1ff;
}

#main-col-3{
    background-color: #fbefff;
}

.btn-img{
    color: #ffffff;
    background-color:#3d02bd;
}

#top-bar {

    width: 100%;
    margin-bottom: 0;
    background-color: #2a095f;
    color:#ffffff;
    border: 0;
    font-size: 3.5em;
    letter-spacing: 0.1em;
    opacity: 0.9;
    margin-bottom:15px;
  }

#bottom-bar {
 

    width: 100%;
    text-align: center;
    margin-bottom: 0;
    background-color: #3d02bd;
    color:#ffffff;
    border: 0;
    font-size: 2.5em;
    letter-spacing: 0.1em;
    margin-top:15px;
    display:inline-block;
  }

<div id="top-bar" class="row h-15">
    app title
    </div>

    <div class="container-fluid">
        <div id="main-screen" class="row">
            <div id="main-col-1" class="col-4 main-col">
                <button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
            </div>
            <div id="main-col-2" class="col-4 main-col">
                <button id="btn-img-2" type="button" class="btn btn-img btn-lg">btn 2</button>
            </div>
            <div id="main-col-3" class="col-4 main-col">
                <button id="btn-img-3" type="button" class="btn btn-img btn-lg">btn 3</button>
           </div>
       </div>
    </div>

    <div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">bottom bar
    </div>

【讨论】：

非常感谢！它不再折叠，但内容仍然没有填满整个屏幕。尤其是中间的栏目，怎样才能让顶栏和底栏之间的空间填满，但3栏的嵌入页面仍然可以垂直滚动？