Bootstrap 3 两列全高

【问题标题】：Bootstrap 3 two columns full heightBootstrap 3 两列全高
【发布时间】：2013-10-06 00:44:26
【问题描述】：

我正在尝试使用 Twitter Bootstrap 3 制作两列 全高 布局。Twitter Bootstrap 3 似乎不支持全高布局。 我想做什么：

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

如果内容增长，nav 也应该增长。

  • 每个父级的高度 100% 不起作用，因为存在内容为一行的情况。
  • position: absolute 好像走错路了。
  • display: table 和 display: table-cell 解决了问题，但并不优雅。
HTML：
    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

有没有办法使用默认的 Twitter Bootstrap 3 类？

【问题讨论】：

  • 导航+内容元素是否必须覆盖剩余的视口（屏幕）高度？
  • 是的。仅用于清除：标题 + 内容 = 视口的 100%，如果内容高度
  • 我不明白，难道你不能只给 .row 提供背景并让 col-md-9 覆盖该部分，反之亦然吗？给行高度 100% 给导航高度 100% 并让 col-md-9 动态增长怎么样？

标签： html css twitter-bootstrap


【解决方案1】：

编辑： 在Bootstrap 4 中，原生类可以 生成全高列 (DEMO)，因为它们将 their grid system 更改为 flexbox。 （继续阅读 Bootstrap 3）

本机 Bootstrap 3.0 类不支持您描述的布局，但是，我们可以集成一些使用 css tables 的自定义 CSS 来实现这一点。

Bootply demo / Codepen

标记：

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

（相关）CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

上面的代码将实现全高列（由于我们添加的自定义 css-table 属性）和 ratio 1:3（导航：内容）对于中等屏幕宽度及以上 - （由于引导程序的默认类：col-md-3 和 col-md-9）

注意：

1) 为了不弄乱 bootstrap 的原生列类，我们在标记中添加了另一个类，如 no-float，并且只在该类上设置了 display:table-cell 和 float:none（与列类本身）。

2) 如果我们只想将 css-table 代码用于特定断点（比如中等屏幕宽度及以上），但对于移动屏幕，我们希望默认返回到通常的引导程序行为比我们可以将自定义 CSS 包装在媒体查询中，比如：

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

现在，对于较小的屏幕，这些列的行为类似于默认的引导列（每个都获得全宽）。

3) 如果所有屏幕宽度都需要 1:3 比例 - 那么从标记中删除引导程序的 col-md-* 类可能会更好，因为这不是它们的本意使用。

Codepen demo

【讨论】：

  • 嗯。这不是我真正想要的，可能有原生引导 3 类的解决方案吗？还是谢谢！
  • 添加浮点数后对我有用：无；到列，但在 js 上没有必要。为什么？更新：@media - 原因
  • @Zubzob - 我更新了我的答案和引导。通过向原生类 col-md-3 和 col-md-9 添加一个额外的类 - 我们可以确保这不会弄乱其他代码。
  • 所以答案是：“不，你不能用开箱即用的引导类来做到这一点”？
  • @Meglio 请阅读我编辑的答案 - 感谢您指出这一点
【解决方案2】：

您可以使用padding-bottom: 100%; margin-bottom: -100%; 技巧实现您想要的，您可以在this fiddle 中看到。

我稍微改变了你的 HTML，但是你可以用你自己的 HTML 用下面的代码来达到同样的效果

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

【讨论】：

  • 好的。我会更新问题。我有动态页面（col-md-9 可以增长），所以，你的变体不应该工作，但我会测试它。谢谢
  • 不是我的意思。我想要全高列，以防 col-md-9 有一行文本高度都一样应该是 100% - 标题高度或简单的 100%。我试过这个技巧，只有像 10000px，-10000px 这样的值。不过谢谢你的回答。
  • 我的列很高，所以我不得不修改 padding-bottom: 10000%;保证金底部：-10000%；它成功了。否则我猜 100% 与页面高度有关
  • 对于尝试此解决方案的其他人，溢出：隐藏需要应用于父行，而不是非侧边栏列才能跨浏览器工作。它在小提琴中是正确的，但在上面的解释中是不正确的。
【解决方案3】：

纯 CSS 解决方案

Working Fiddle

仅使用 CSS2.1，适用于所有浏览器 (IE8+)，无需指定任何高度或宽度。

这意味着如果您的标题突然变长，或者您的左侧导航需要放大，您无需在 CSS 中修复任何内容。

完全响应、简单明了且非常易于管理。

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

解释： 容器div 占身体高度的 100%，他被分成 2 个部分。 标题部分将跨越到所需的高度，HeightTaker 将占据其余部分。 它是如何实现的？通过以 100% 的高度沿容器浮动一个空元素（使用 :before），并在末尾使用 clear 规则给 HeightTaker 一个空元素（使用 :after）。该元素不能与浮动元素在同一行，所以他被推到最后。这正是文档的 100%。

我们使HeightTaker 跨越容器高度的其余部分，而不说明任何特定的高度/边距。

在 HeightTaker 内部，我们构建了一个普通的浮动布局（以实现类似于显示的列），并进行了微小的更改。我们有一个 Wrapper 元素，这是 100% 高度工作所必需的。

更新

Here's 带有 Bootstrap 类的演示。 （我刚刚在您的布局中添加了一个 div）

【讨论】：

  • 是的，它是最美丽的解决方案。你能把它用于引导类吗？
  • 请解释一下它是如何工作的。目前最适合批准
  • 我不知道引导程序..对不起。但它很容易使用..你可以自己做。我将添加对其工作原理的解释。
  • @baxxabit 我添加了一个解释。如果您需要更多信息，请告诉我。
  • 如果您调整窗口大小，它将无法正确显示在屏幕上。
【解决方案4】：

我想到了一个微妙的变化，它不会改变默认的引导行为。 而且我只能在需要时使用它：

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

所以我可以这样使用它：

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

【讨论】：

  • 为我工作得很好（使用引导程序 3）
  • 我无法让上述解决方案之一起作用，垂直对齐对我来说是关键。
【解决方案5】：

现代且非常简单的解决方案：

HTML：

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</div>

CSS：

.row {
    display: flex;
}

【讨论】：

  • 行仍然是 0px 高
【解决方案6】：

据我所知，您最多可以使用 5 种方法来完成此操作：

  1. 使用 CSS 显示表格/表格单元格属性或使用实际表格。
  2. 在包装器内使用绝对定位元素。
  3. 使用 Flexbox 显示属性，但截至今天，它仍然有 partial support
  4. 使用faux column technique 模拟整个柱高。
  5. 使用填充/边距技术。 See example.

Bootstrap：我没有太多经验，但我认为他们没有为此提供样式。

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

【讨论】：

  • 谢谢@Oriol。你真棒。几点：1），2）是的，但不是我想要的 3）这是一个解决方案，但仅适用于现代 ff 和 chrome。 safari 支持旧版本的 flexbox 4) 不是引导类 5) 右列可以增长。所以溢出：隐藏将裁剪重要的行。这不酷:) 我会试试你的代码
【解决方案7】：

纯 CSS 解决方案很简单，它就像一个魅力跨浏览器。

您只需为导航和内容列添加一个大的填充和同样大的负边距，然后将它们的行包装在一个隐藏溢出的类中。
Live view
Edit view

HTML 

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS 

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}

祝你好运！

【讨论】：

  • 很抱歉，但这看起来像是一个可怕的 hack，它不会为您提供将元素绝对定位在子容器底部的选项。
  • 如果您有底部边框半径或 div 背景中的某种视觉资产，则不是一个好的解决方案。
【解决方案8】：

解决办法有两种方式

  1. 使用 display:table 和 display:table-cell
  2. 使用内边距和负边距。

bootstrap 3 中没有提供用于获得上述解决方案的类。 display:table 和 display:table-cell 仅在使用 HTML 中的表格时给出。 负边距和填充类也不存在。

因此我们必须使用自定义 css 来实现这一点。

下面是第一个解决方案

HTML 代码：

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

对应的css：

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

下面是第二种解决方案

HTML 代码：

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

对应的css：

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

【讨论】：

  • 列没有 100% 的视口高度
  • 抱歉忘记了基本样式 html,body,container{ height:100%;} 将此样式添加到第一个解决方案中
  • 右列可以增长，所以 overflow:hidden for row 可以裁剪一些内容，如果它需要超过视口的高度。
  • 删除溢出：从行中隐藏。有隐藏内容jsfiddle.net/gMPXG/7/embedded/result
  • 那有什么问题？？
【解决方案9】：

好的，我已经使用 Bootstrap 3.0

实现了同样的目标

最新引导程序示例

http://jsfiddle.net/HDNQS/1/

HTML：

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS：

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

【讨论】：

  • 是的，但它与批准的答案相同。谢谢
  • 是的，基本相同，但您需要添加一些小的“调整”（参见content:none 和其他小东西）。我想发布一个“插入式”替代品，我也可以复制意大利面
  • +1 用于添加“垂直对齐：顶部”。在我添加此内容之前，我的左栏一直卡在页面底部。
【解决方案10】：

因此，您最好的选择似乎是采用padding-bottom 以否定margin-bottom 策略。

我做了两个例子。一个是&lt;header&gt; inside .container，另一个是outside。

两个版本都应该可以正常工作。请注意使用以下 @media 查询，以便在较小的屏幕上删除额外的填充...

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

除此之外，这些示例应该可以解决您的问题。

【讨论】：

  • 关于在小屏幕上移除额外填充的好方法 gio
  • 对外部标题的小提琴竖起大拇指，这是唯一适合我的情况。
【解决方案11】：

如果您所关心的只是涂上颜色，那么有一种更简单的方法。

把它放在你的body标签的第一个或最后一个

<div id="nfc" class="col col-md-2"></div>

这在你的 CSS 中

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

您只是在创建一个形状，将其固定在页面后面并将其拉伸到全高。通过利用现有的引导类，您将获得正确的宽度并保持响应。

这个方法ofc有一些限制，但是如果是针对页面的根结构，那就是最好的答案了。

【讨论】：

  • 为什么你有position: absolute，然后是position: fixed？
  • 还不是最模糊的，错字:)
  • 不错的解决方案。但是，我只能使用.container-fluid 让它正确排列。我想使用.container。想法？
  • .container 或 .container-fluid 与此无关。 .col.col-md-2 使用引导程序设置宽度。我上面的 CSS 将 div 强制为全高，并具有足够的负 z-index 以确保它位于所有内容的后面。如上所述，它应该是&lt;body&gt; 标签中的第一个或最后一个元素
【解决方案12】：

试试

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

.fill 类的 css 在下面

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

请查看fiddle.

【讨论】：

  • 感谢您的回答，但我使用 twitter bootstrap 3，而不是 2。请阅读getbootstrap.com/getting-started/#migration
  • bootstrap 3，没有使用 span，改为 col.
  • 好的。列的高度将作为列中内容的高度，但我只能有一行。
  • 谢谢@Kooki3。只需将span 更改为col-md-，让我们看看&lt;div class="container"&gt; &lt;div class="row"&gt; &lt;div class="col-md-12"&gt;header section&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="col-md-4"&gt;Navigation&lt;/div&gt; &lt;div class="col-md-8"&gt;Content&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 会发生什么
  • 不起作用。你看我的评论了吗？ jsfiddle.net/YQUQd/1/embedded/result
【解决方案13】：

试试这个

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

访问http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

感谢赛义德

【讨论】：

  • 谢谢，你能把你的例子改成 bootstrap 3.0 吗？
【解决方案14】：

我写了一个与 Bootstrap 兼容的简单 CSS 来创建完整的宽度和高度表：

小提琴： https://jsfiddle.net/uasbfc5e/4/

原理是：

  • 在主 DIV 上添加“tablefull”
  • 然后隐式地，下面的 DIV 将创建行
  • 然后行下方的 DIV 将是单元格
  • 您可以将“tableheader”类用于标题或类似内容

HTML：

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS：

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

【讨论】：

  • 当心 CSS 缩小器，有时它们会将 0%; 更改为 0;，这是完全不同的。如果发生这种情况，您可以改用1%;。
【解决方案15】：

如果行后没有内容（取整个屏幕高度），使用position: fixed; height: 100% 替换.col:before 元素的技巧可能会很好：

header {
  background: green;
  height: 50px;
}
.col-xs-3 {
  background: pink;
}
.col-xs-3:before {
  background: pink;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
.col-xs-9 {
  background: yellow;
}
.col-xs-9:before {
  background: yellow;
  content: ' ';
  height: 100%;
  margin-left: -15px; /* compensates column's padding */
  position: fixed;
  width: inherit; /* bootstrap column's width */
  z-index: -1; /* puts behind content */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<header>Header</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">Navigation</div>
        <div class="col-xs-9">Content</div>
    </div>
</div>

【讨论】：

    【解决方案16】：

    这里没有提到偏移。

    您可以使用绝对来定位左侧边栏。

    CSS

    .sidebar-fixed{
  width: 16.66666667%;
  height: 100%;
}

    HTML

    <div class="row">
  <div class="sidebar-fixed">
    Side Bar
  </div>
  <div class="col-md-10 col-md-offset-2">
    CONTENT
  </div>
</div>

    【讨论】：

      【解决方案17】：

      试试这个

      <div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

      这使用 Bootstrap 3，所以不需要额外的 CSS 等...

      【讨论】：

      【解决方案18】：

      你在 JAvascript 的部分看到 bootstrap 的 afix 了吗？？？

      我认为这将是最好和最简单的解决方案，伙计。

      看看那里：http://getbootstrap.com/javascript/#affix

      【讨论】：

      • 你能分享一下例子吗，我怎样才能用 afix 做两列？
      • 顺便说一句....你试过最小高度吗？也许它很有用，对吧？@baxxabit
      【解决方案19】：

      试用此处提供的代码后：Bootstrap Tutorial

      这是使用最新的Bootstrap v3.0.2 的另一种选择：

      标记： 

      <div id="headcontainer" class="container">
           <p>Your Header</p>    
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Navigation</p> 
         </div>
         <div class="col-xs-8"> 
            <p>Your Content</p> 
         </div>
      </div>
</div>

      其他 CSS：

      #maincontainer, #headcontainer {
width: 100%;
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}

      示例JSFiddle

      希望这对感兴趣的人有所帮助。

      【讨论】：

      猜你喜欢
      • 2018-07-11
      • 2023-03-07
      • 1970-01-01
      • 2017-05-11
      • 1970-01-01
      • 1970-01-01
      • 2014-10-02
      • 2017-02-13
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode