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

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

只需固定您想要固定的元素的宽度，不要在引导列中添加度量（如 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/