如何使用 Bootstrap 网格强制固定列宽并保持其他列宽

Question

我正在使用 Bootstrap，我想创建下图所示的网格布局。

我希望有一个固定为 330 像素的侧边栏，无论屏幕尺寸如何，并将所有内容都保留在 #page-content 根据访问者屏幕的分辨率调整大小。

如何实现图像上显示的布局？如果我执行以下操作：

 <div class="col-md-10" id="page-content">
   <div class="col-md-2">...</div>
   <div class="col-md-10">...</div>
</div>
<div class="col-md-2" id="sidebar">
   ...
</div>

并尝试使用 width="330px"; 修复 #sidebar 的宽度，对于较小的屏幕尺寸，内容将向右移动，无法看到。 Since Bootstrap width: 16.66666667%; to .col-md-2 , it seems like I would have to get rid the grid system for the higher level divs, #page-content and #sidebar .但是，我怎样才能确保 #page-conten t 填充 #sidebar 左侧的剩余空间。

原文由 LaGuille 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 的网格应该是流动的，所以它们应该随着屏幕大小的变化而变化。

对于您想要的布局，您可以使用 display: flex 或 display:table 来实现它。我将使用 display:table 作为我的示例，因为对它的支持比 flexbox 更多。

您需要将 HTML 更改为以下内容：

 <div class="page">
  <div class="page-content">
    <div class="row">
      <div class="col-md-2">
        <div class="blue">test</div>
      </div>
      <div class="col-md-10">
        <div class="green">test</div>
      </div>
    </div>
  </div>
  <div class="sidebar">
    <div class="gold">test</div>
  </div>
</div>

这是我使用的 CSS：

 .page {
  display: table;
  width: 100%;
}
.page-content,
.sidebar {
  display: table-cell;
}
.sidebar {
  width: 330px;
}
.blue,
.green,
.gold {
  height: 50px;
}

.blue {
  background-color: blue;
}
.green {
  background-color: green;
}
.gold {
  background-color: gold;
}

您可以在此处查看小提琴： https ://jsfiddle.net/m0nk3y/qjutpze4/

原文由 Gene Parcellano 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Bootstrap 4.0 测试版：

HTML:

 <div class="container-fluid">
  <div class="row">
    <div class="col my-sidebar">
      <h2>LEFT</h2>
      <h6>(FIXED 230px COLUMN)</h6>
    </div>
    <div class="col text-center">
      <h1>CENTER (FLUID COLUMN)</h1>
    </div>
    <div class="col my-sidebar">
      <h2>RIGHT</h2>
      <h6>(FIXED 230px COLUMN)</h6>
    </div>
  </div>
</div>

CSS：

 .my-sidebar {
    -ms-flex: 0 0 230px;
    flex: 0 0 230px;
    background-color: greenyellow;
}

@media (max-width: 690px) {
  .my-sidebar {
    display: none;
  }
}

现场示例： https ://www.codeply.com/view/PHYTWFDFRU

在此示例中，如果浏览器窗口宽度变得小于 690px，则固定列将消失。如果您希望它们始终可见，请完全删除带有 @media 的第二个 css 块。

原文由 Serg 发布，翻译遵循 CC BY-SA 3.0 许可协议