Question

我现在正在为我的应用程序在仪表板上工作，并且在布局结构方面遇到了一些问题。

我希望容器中的内容嵌套在侧栏和导航栏之间。我正在为此使用引导程序以及一组自定义样式。

这是侧边栏的HTML：

<div class="fixed-sidebar fixed-sidebar-light">
    ...
</div>

这是侧边栏的CSS：

.fixed-sidebar {
    position: fixed;
    z-index: 22;
    width: 270px;
    min-height: 1000vh;
    box-shadow: 0 0 34px 0 rgba(63, 66, 87, 0.1);
}

这是标题的HTML：

<header class="header" id="site-header">
...
</header>

这是标题的CSS：

height: 70px;
background-color: #3f4257;
padding-right: 70px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 21;

为什么容器中的内容仍会被推到右侧？

这是一个包含所有代码的codepen。

https://codepen.io/teecp/pen/zyOpvd

Answer 1

您的侧边栏固定位置意味着它不再与DOM中的其余标题和容器内联。看起来您的包含内容的容器在较大的断点处不会与边栏发生冲突，因为该容器的最大宽度为1300px和$route["videos"] = "videos/get_videos/";，在容器的末端仅留有足够的自动余量，不会碰撞”。

对此的修补程序（我不完全同意该结构）将是以下调整：

CSS

margin: 0 auto

HTML

.container-sidebar {
  margin-left: 270px; 
}

我认为，侧边栏应被最小化以最大程度地增加屏幕的显示空间-因此，在这种特殊情况下，侧边栏应在页面的左侧和右侧滑动。拥有此用户界面会更改您的标记顺序，但请三思而后行，也许这就是您想要的。

Answer 2

此特殊布局是我目前正在处理的东西，我有一个可以切换的侧边栏以及一个顶部导航栏，并且我只想更改位于这两个组件“内部”的内容。

我不确定这是否是您想要的侧边栏行为，但是可以轻松调整，例如，如果您想要的是侧边栏仅在内容顶部扩展而无需按下它，那么 >

我遵循了这个特别的教程，该教程对我有很大帮助，我绝对推荐：https://bootstrapious.com/p/bootstrap-sidebar

我建立了这样的布局：

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        // open or close navbar
        $('#sidebar, #content, footer').toggleClass('active');
    });
 });

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

#content {
  width: calc(100% - 230px);
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}
#content .panel {
  padding: 20px 0;
  margin-top: 80px;
}
#content.active {
  width: 100%;
}

#top-bar {
  background-color: #FFF;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.075);
  z-index: 997;
  width: inherit;
  position: fixed;
}
#top-bar .navbar {
  padding: 20px;
}

#sidebar {
  min-width: 230px;
  max-width: 230px;
  background: #FCFCFC;
  transition: all 0.3s;
  height: 100vh;
  position: fixed;
  margin-left: -230px;
  top: 0;
  /* top layer */
  z-index: 999;
  padding: 20px;
  box-shadow: 0px 0px 15px #0000001f;
}
#sidebar.active {
  margin-left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="wrapper">
        <nav id="sidebar" class="active">
            <h1>Sidebar</h1>
        </nav>
        <div id="content" class="">
            <header id="top-bar" class="">
                <div class="navbar navbar-expand container-anchor">
                    <button type="button" id="sidebarCollapse" class="btn btn-outline-dark mr-3">
                        <i class="fas fa-align-left"></i>
                        <span>Toggle Sidebar</span>
                    </button>
                </div>
            </header>
            <div id="panel" class="panel container-fluid">
              <section>
                <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis obcaecati voluptatum magni ducimus mollitia excepturi rem iste illum, quod dolorum doloribus, nostrum reiciendis perferendis animi porro sapiente nesciunt? Excepturi eveniet iusto rerum quis illo repudiandae tempora, harum amet nesciunt officia libero ullam magni aliquam numquam? Doloremque aliquam in atque harum aut mollitia aspernatur doloribus veritatis porro et cum, nulla quidem perspiciatis at rerum magni provident quibusdam nam id cumque reiciendis assumenda consectetur! Placeat quod alias eligendi error repudiandae, numquam repellat! Voluptatem dolore iste praesentium nulla ducimus fugit sed perspiciatis. Soluta nisi, esse porro reprehenderit illo commodi hic placeat nobis aspernatur. Necessitatibus nihil cupiditate, ut odit optio soluta? Corrupti quam omnis provident vel eos aliquam non blanditiis totam iste. Repellendus dolorem voluptatem atque, laborum, suscipit amet exercitationem eum ipsum, quaerat qui ratione aut architecto repellat sint! Quas earum exercitationem amet recusandae pariatur odit aspernatur sint perferendis non porro, harum quidem. Ea.
                    </p>
                    
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis obcaecati voluptatum magni ducimus mollitia excepturi rem iste illum, quod dolorum doloribus, nostrum reiciendis perferendis animi porro sapiente nesciunt? Excepturi eveniet iusto rerum quis illo repudiandae tempora, harum amet nesciunt officia libero ullam magni aliquam numquam? Doloremque aliquam in atque harum aut mollitia aspernatur doloribus veritatis porro et cum, nulla quidem perspiciatis at rerum magni provident quibusdam nam id cumque reiciendis assumenda consectetur! Placeat quod alias eligendi error repudiandae, numquam repellat! Voluptatem dolore iste praesentium nulla ducimus fugit sed perspiciatis. Soluta nisi, esse porro reprehenderit illo commodi hic placeat nobis aspernatur. Necessitatibus nihil cupiditate, ut odit optio soluta? Corrupti quam omnis provident vel eos aliquam non blanditiis totam iste. Repellendus dolorem voluptatem atque, laborum, suscipit amet exercitationem eum ipsum, quaerat qui ratione aut architecto repellat sint! Quas earum exercitationem amet recusandae pariatur odit aspernatur sint perferendis non porro, harum quidem. Ea.
                    </p>
                    
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis obcaecati voluptatum magni ducimus mollitia excepturi rem iste illum, quod dolorum doloribus, nostrum reiciendis perferendis animi porro sapiente nesciunt? Excepturi eveniet iusto rerum quis illo repudiandae tempora, harum amet nesciunt officia libero ullam magni aliquam numquam? Doloremque aliquam in atque harum aut mollitia aspernatur doloribus veritatis porro et cum, nulla quidem perspiciatis at rerum magni provident quibusdam nam id cumque reiciendis assumenda consectetur! Placeat quod alias eligendi error repudiandae, numquam repellat! Voluptatem dolore iste praesentium nulla ducimus fugit sed perspiciatis. Soluta nisi, esse porro reprehenderit illo commodi hic placeat nobis aspernatur. Necessitatibus nihil cupiditate, ut odit optio soluta? Corrupti quam omnis provident vel eos aliquam non blanditiis totam iste. Repellendus dolorem voluptatem atque, laborum, suscipit amet exercitationem eum ipsum, quaerat qui ratione aut architecto repellat sint! Quas earum exercitationem amet recusandae pariatur odit aspernatur sint perferendis non porro, harum quidem. Ea.
                    </p>
              </section>
            </div>
        </div>
    </div>

这是另一个在页面内容之上创建覆盖的示例

$(document).ready(function(){

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $('.overlay').toggleClass('active');
    });

    $('.overlay').on('click', function () {
        $('.overlay').toggleClass('active');
        $('#sidebar').toggleClass('active');
    });

    $('#dismiss').on('click', function () {
        $('.overlay').toggleClass('active');
        $('#sidebar').toggleClass('active');
    });

});

.wrapper {
  display: flex;
  width: 100%;
  align-items: stretch;
}

#content {
  width: 100%;
  min-height: 100vh;
  transition: all 0.3s;
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

/* display .overlay when it has the .active class */
.overlay.active {
  display: block;
  opacity: 1;
}

#sidebar {
  min-width: 350px;
  max-width: 350px;
  background: #000;
  color: #fff;
  transition: all 0.3s;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -350px;
  /* top layer */
  z-index: 9999;
  text-align: center;
  padding: 20px;
}

#sidebar.active {
  margin-right: 350px;
}

header {
  background-color: #eee;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="wrapper">
            <nav id="sidebar" class="">
                <button type="button" id="dismiss" class="d-block btn btn-success">
                Close Sidebar
                </button>
                
                <div>
                   Sidebar Content
                </div>
                
            </nav>
        <main id="content">
            <header class="top-menu">
                <div class="navbar navbar-expand navbar-light container">
                    <h2>Top Bar</h2>
                    <button type="button" id="sidebarCollapse" class="nav-link ml-auto btn btn-outline-dark">
                       Toggle Sidebar
                    </button>
                </div>
            </header>
            
            <section>
              Content goes here
            </section>
            
        </main>
        <div class="overlay"></div>
    </div>

Answer 3

如果要使侧边栏始终显示在左侧，并且不想打开或关闭侧边栏，则可以通过仅使用引导程序而无需编写自定义CSS来实现。

使用bootstrap navbar作为标题，并删除您为header编写的所有额外的CSS，否则它将覆盖bootstrap一个。

请勿使用fixed-sidebar类，而不是按照引导程序模式来重构模板，您需要执行以下操作，并且您也将不需要任何自定义的CSS：

<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav>
    </header>
    <div class="container-fluid">
        <div class="row">
            <!--Sidebar-->
            <div class="col-md-3 col-xl-2">
                <a class="logo" href="/">
                    <div class="img-wrap">
                        <img width="150" src="/assets/logo-white-cad55691e551f40916535bcbe93173c0d76adc0bf6db8d15de937e475874f76a.png" />
                    </div>
                </a>
                <div class="mCustomScrollbar ps ps--theme_default" data-mcs-theme="dark">
                    <ul class="left-menu">
                        <li>
                            <a href="/">
                                <svg xmlns="http://www.w3.org/2000/svg" class="left-menu-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                                <span class="left-menu-title">Dashboard</span>
                            </a>            </li>
                        <li>
                            <a href="/questions">
                                <svg xmlns="http://www.w3.org/2000/svg" class="left-menu-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
                                <span class="left-menu-title">Questions</span>
                            </a>            </li>
                        <li>
                            <a href="/categories">
                                <svg xmlns="http://www.w3.org/2000/svg" class="left-menu-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg>
                                <span class="left-menu-title">Categories</span>
                            </a>            </li>
                        <li>
                            <a href="/tournaments">
                                <svg xmlns="http://www.w3.org/2000/svg" class="left-menu-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
                                <span class="left-menu-title">Tournaments</span>
                            </a>            </li>
                        <li>
                            <a href="/users">
                                <svg xmlns="http://www.w3.org/2000/svg" class="left-menu-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                <span class="left-menu-title">Users</span>
                            </a>            </li>
                    </ul>
                </div>
            </div>

            <!--Main content-->
            <div class="col-md-9 col-xl-10">
                <div class="row">
                    <div class="col-lg-3">
                            <p>Anything in this content area is being squished under the sidebar when being scaled down</p></div>
                    </div>
                    <div class="col-lg-3">
                        <div data-react-class="StatCard" data-react-props="{&quot;title&quot;:&quot;Questions&quot;,&quot;data&quot;:1}"></div>
                    </div>
                    <div class="col-lg-3">
                        <div data-react-class="StatCard" data-react-props="{&quot;title&quot;:&quot;Categories&quot;,&quot;data&quot;:2}"></div>
                    </div>
                    <div class="col-lg-3">
                        <div data-react-class="StatCard" data-react-props="{&quot;title&quot;:&quot;Tournaments&quot;,&quot;data&quot;:1}"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

Bootstrap本身提供了许多功能，您只需要按照说明文件操作，即可获得所需的所有功能。始终尝试使用框架的功能，而不是定义自定义CSS或覆盖现有的CSS。仅当无法通过框架提供的任何组件来实现时，才编写自定义css。

此外，如果您想为小型设备隐藏该固定的侧边栏并在下拉菜单中显示它们，则可以为小型设备使用引导程序的折叠功能。

CSS边栏重叠容器内容

3 个答案: