个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 07:02:36 25 4
gpt4 key购买 nike

我通常会做一些前端设计和后端设计，但最近几个小时这个页面一直困扰着我。

我放在一起的东西在移动设备上看起来非常糟糕，在桌面上也不能很好地工作——我对 Bootstrap 4 比较陌生，使用 flex boxes 看起来这不应该太复杂。

我真的很感激任何帮助!谢谢:)

我想在一个页面上保持整个内容可见 - 移动横向/纵向仅显示内容和框/按钮。

这就是我要做的:

Layout

最佳答案

好吧，我还没有完全讲完，但这是要点。

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>

结果:

Results

关于javascript - Bootstrap 4 移动/桌面页面布局隐藏在带有标题的移动设备上的两个侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51904957/

25 4 0
文章推荐： c - 如何为国际象棋中的女王移动生成位板占用掩码？
文章推荐： python - 当我唯一的输入是 ndb.Query 时，如何获取 ndb.Model？
文章推荐： python - 使用 collections.Iterable 在 python 中展平不规则列表时，列表不会作为最终对象返回
文章推荐： objective-c - XCode C 编译器错误预期成员名称或声明说明符后的 ';' 预期 ')'
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com