Я хочу создать веб-страницу, чей макет отзывчивый.Я впервые использую Bootstrap и прочитал, что он основан на структуре из 12 столбцов.
На этой веб-странице мне нужно вставить ползунок, переключатели, флажок и графики, сделанные в d3..js, некоторые из которых имеют фиксированную ширину.Например, карта имеет ширину 600 пикселей (она не может быть меньше, иначе она будет деформирована).Тепловая карта имеет переменную ширину, потому что она зависит от выбранных данных.Диаграммы с кратными кратными числами представляют собой 32 очень маленьких графика (каждый имеет размер 80x40).
То, что я хотел бы, показано на этом рисунке:
Я объясню лучше.Если размер экрана большой, то тепловая карта размещается с правой стороны карты (случай 1).
Если размер экрана меньше, размер контейнера карты не изменяется,контейнер тепловых карт становится меньше, и если он может содержать тепловую карту, то тепловая карта помещается рядом с картой (случай 2), в противном случае она располагается под картой (случай 3).
Это мойкод:
<body>
<!-- YEAR SELECTOR -->
<div id='year-selector-container'>
<input id='year-slider' class='year-range' type='range' min='1981' max='2017' value='2016' step='1'>
Year: <span id='year-span'>2016</span>
</div>
<!-- VACCINE SELECTOR -->
<div id='vaccine-selector-container'>
<form id='vaccine-selector'>
<input type='radio' name='vaccine-selector' id='rb-dtp' value='DTP' checked />
<label for='rb-dtp' title='Vaccine against diphtheria, tetanus, pertussis'>DTP</label>
<input type='radio' name='vaccine-selector' id='rb-hib' value='HIB' />
<label for='rb-hib' title='Vaccine against haemophilus influenzae type B'>HIB</label>
<input type='radio' name='vaccine-selector' id='rb-mmr' value='MMR' />
<label for='rb-mmr' title='Vaccine against measles, mumps and rubella'>MMR</label>
<input type='radio' name='vaccine-selector' id='rb-pol' value='POL' />
<label for='rb-pol' title='Vaccine against poliomyelitis'>POL</label>
<input type='radio' name='vaccine-selector' id='rb-hepB' value='HEP B' />
<label for='rb-hepB' title='Vaccine against hepatitis b'>HEP B</label>
</form>
</div>
<!-- SHOW CASES OR NOT -->
Cases: <input type='checkbox' id='showCasesOrNotId' name='showCasesOrNotName' value='ShowCasesOrNot' checked='true'>
<label for='showCasesOrNotId'>Show reported cases</label>
<!-- MAP -->
<div id='map'></div>
<!-- HEATMAP -->
<div id="initialOrder">
<button>Initial order</button>
</div>
<div id='heatmap'></div>
<div id='sparkline'></div>
<!-- SMALL MULTIPLES -->
<div id='doublebar'></div>
<div id='doubleline'></div>
<!-- LEGEND -->
<div id='legend-rect'></div>
<div id='legend-circle'></div>
<!-- PATTERN -->
<div id='pattern'></div>
<script src='/script/all.js' rel='script'/><{{!}}/script>
<script src='/script/bubblemap.js' rel='script'/><{{!}}/script>
<script src='/script/heatmap.js' rel='script'/><{{!}}/script>
<script src='/script/smallMultiples.js' rel='script'/><{{!}}/script>
</body>
И вот результаты:
ЗДЕСЬ код.
Мне нужна помощь.Спасибо