Question

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

我希望有一个带有330px固定的侧边栏，无论屏幕大小是多少，并且根据访问者屏幕的分辨率，保持#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-conten填充#sidebar左侧的剩余空格。

Answer 1

Bootstrap 4.0 beta：

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块。

Answer 2

只需固定要固定的元素的宽度即可，不要在bootstrap列中添加度量（例如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>

Answer 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/

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

3 个答案: