用于移动/桌面的 Bootstrap 4 页面布局两个侧边栏隐藏在带有标题的移动设备上答案

【问题标题】：Bootstrap 4 Page Layout For Mobile/Desktop Two Sidebars Hidden on Mobile with Header用于移动/桌面的 Bootstrap 4 页面布局两个侧边栏隐藏在带有标题的移动设备上
【发布时间】：2018-08-18 12:47:02
【问题描述】：

我通常用一点前端来做后端设计，但这个特定的页面在过去几个小时里一直困扰着我。

我整理的东西在移动设备上看起来非常糟糕，在桌面设备上效果不佳 - 我对 Bootstrap 4 相对较新，而且使用弹性盒子看起来应该不会太复杂。

非常感谢您对此的任何帮助！谢谢你:)

我希望将整个内容显示在一个页面上 - 移动横向/纵向仅显示内容和框/按钮。

这就是我想要的：

【问题讨论】：

标签： javascript html css flexbox bootstrap-4

【解决方案1】：

好吧，我还没有完全完成它，但这里是它的要点。

CSS：

body { 
    padding-top:54px;
    height:100%;
    width:100%;
}
#content {
    margin-top: 0px;
    overflow-y: scroll;
    height: calc(100vh - 104px);
}
#page-wrapper {
    height: calc(100vh - 54px);
}

导航栏：

<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a id="HeaderLink" class="nav-link btn-raised">
                <span id="HeaderLinkSpan">
                    App Name
                </span>
            </a>
        </li>
    </ul>
    <div class="collapse navbar-collapse justify-content-end">
        <div class="dropdown dropdown-menu-right text-right">
            <button class="btn btn-secondary dropdown-toggle btn-raised" type="button"
                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown:
            </button>
            <div class="dropdown-menu center-dropdown" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Dropdown Item 1</a>
                <a class="dropdown-item" href="#">Dropdown Item 2</a>
                <a class="dropdown-item" href="#">Dropdown Item 3</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="?logout">Logout</a>
            </div>
        </div>
    </div>
</nav>

HTML：

<body>
<% include ../partials/navheader.ejs %>
<div id="page-wrapper">
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-2" id="LeftSidebar" style="background-color:blue">
      </div>
      <div class="col-8">
        <div class="row" id="content">
        </div>
        <div class="row no-gutters" style="height:40px;padding-top:7px;">
          <div class="col-10 no-gutters">
            <input type="text" class="form-control" style="width:100%">
          </div>
          <div class="col-2">
            <input type="button" class="btn btn-primary" style="width:100%"></div>
        </div>
      </div>
      <div class="col-2" id="RightSidebar" style="background-color:greenyellow">
      </div>
    </div>
  </div>
</div>
</body>

结果：

【讨论】：