将标题栏放置在侧边栏旁边答案

【问题标题】：Positioning a header bar next to a sidebar将标题栏放置在侧边栏旁边
【发布时间】：2016-09-14 04:50:31
【问题描述】：

我正在使用引导程序，并且想在侧边栏的右侧添加一个标题栏，以便它在旁边对齐，而不是坐在顶部。侧边栏也是可折叠的，因此一旦侧边栏折叠，标题就必须延伸到整个页面。

侧边栏代码：

<!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

【问题讨论】：

您是否尝试为此创建一些 CSS 标记？
尝试在包装器内部和外部使用默认引导导航栏，但它会在引导导航栏的高度上方堆叠或向下推侧边栏
创建一些 CSS 并试一试...您可能需要牢记 CSS 属性 margin-left。
Bootstrap 也是基于列的布局。如果某物是 2 列侧边栏 - 主要区域只能是 10 列宽。
没关系通过将默认导航栏放置在包装器内，但在侧栏导航 div 下方，意识到有人为你做你的工作是微不足道的，对不起问题，这一切都完成了，现在很好

标签： html css twitter-bootstrap navbar

【解决方案1】：

通过将默认导航栏定位在包装内，但在侧边栏导航 div 下方，无需额外定位。

【讨论】：

【解决方案2】：

既然您已经在使用引导程序，为什么不将已经构建的列类添加到您的标记中。确保包含 Bootstrap CSS。

<div id="sidebar-wrapper" class="col-lg-3">

然后在你的标题上...

<div id="header-wrapper" class="col-lg-9">

也刚做了笔found here

利用列类是个好主意，因为它使响应式设计更容易。

【讨论】：