Макет рухнул в Electron с помощью Bootstrap 4 - PullRequest
Новая
       40

Макет рухнул в Electron с помощью Bootstrap 4

0 голосов
/ 04 октября 2018

Я создаю приложение Electron, макет которого будет таким:

|строка заголовка |

| col 1 |Кол 2 |col 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;
  }

1 Ответ

0 голосов
/ 04 октября 2018

Отметьте этот код

и измените ” 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>
...