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

【问题标题】：How to force a fixed column width with a Bootstrap grid and keep the other ones fluid如何使用 Bootstrap 网格强制固定列宽并保持其他列宽
【发布时间】：2017-06-14 08:57:53
【问题描述】：

我正在使用 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>

并尝试将#sidebar 的宽度固定为width="330px";，以适应较小的屏幕尺寸，内容将向右移动，无法看到。由于 Bootstrap 将 width: 16.66666667%; 分配给 .col-md-2，看来我必须摆脱更高级别 div 的网格系统 #page-content 和 #sidebar。但是，我怎样才能确保#page-content 填满#sidebar 左侧的剩余空间。

【问题讨论】：

我已经设法通过将 min-width 和 max-width 设置为相同的值来锁定列的宽度。奇迹般有效。使用 Boostrap 4。

标签： html css twitter-bootstrap

【解决方案1】：

只需修复您想要修复的元素的宽度，不要在引导列中添加度量（如 col-8），这样做会自动占用剩余空间。

在我的情况下，我在行上只有两个元素。希望这会有所帮助。

.fixed{
    width: 300px;
}

<body>
    <div class="container">
        <div class="row">
            <div class="fixed">
                Fixed Width
            </div>
            <div class="col">
                Fluid
            </div>
        </div>        
    </div>
</body>

【讨论】：

这是在Bootstrap中实现这个东西的最好方法。
又好又简单
宾果游戏！就是这个。
在我的情况下，它从我的列中生成行，这意味着，如果我将所有 div class="col"> 替换为 div class="fixed">，则所有单元格都位于彼此下方。抱歉，如果这是一个愚蠢的评论，那只是开始了一些副业，并且很久没有研究过 html/cms。

【解决方案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

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

【讨论】：

为了完美，我可以建议使用类 d-none d-sm-block （按相应顺序）而不是使用@media 规则吗？ d-sm-block 在 576px 宽度处触发，这是根据 Bootstrap 4 设备方案。您可以在getbootstrap.com/docs/4.0/utilities/display 了解更多信息
@ThomasWilliams 抱歉，我在一年多前退出了 Web 开发，现在没有时间仔细考虑您的建议。我认为我的示例可以让您了解 CSS 的工作原理，而无需了解这些 Bootstrap 类的含义。但是，如果您愿意，可以编辑我的答案并添加您的替代示例。

【解决方案3】：

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/

【讨论】：

你的 jsfiddle 不符合他的要求，他想在同一行对齐，但你的显示在两行。
@BradyHuang 当宽度小于 1009 像素时，这个显示只有两行！不过我不认为有任何选择，因为如果屏幕很窄，其他列就没有其他地方可以去，而不是彼此下方！