Как заставить фиксированную ширину столбца с помощью сетки Bootstrap и поддерживать другие жидкости

Я использую 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 t заполняет оставшееся пространство слева от #sidebar.

Ответ 1

Сетка начальной загрузки должна была быть плавной, поэтому она должна меняться при изменении размера экрана.

Для желаемого макета вы можете сделать это, используя вместо этого 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/

Ответ 2

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

В этом примере фиксированные столбцы исчезнут, если ширина окна браузера станет меньше 690 пикселей. Если вы хотите, чтобы они были всегда видимыми, удалите второй css-блок с помощью @media полностью.