Я использую 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
.