Я только начал изучать Bootstrap и пытаюсь реализовать его на веб-странице. Но у меня возникли проблемы с наложением друг на друга элементов класса начальной загрузки. На полном экране веб-страница выглядит так:
При некотором уменьшении ширины окна оно становится:
И делая окно почти таким же маленьким, как экран мобильного телефона, я получаю следующее:
Мой HTML-код для этого:
<body>
<div id="point" class="row container-fluid">
<div id="point_display" class="col-md-10">
</div>
<div id="point_info" class="row col-md-2">
<div class="col-md-8">
<h5>Current point position:</h5>
<p></p>
</div>
<div class="col-md-8">
<input type="checkbox" id="coordinate_transform" onclick="transformCoordinate(this.checked)"><span>Transform co-ordinate system</span></input>
</div>
<div class="col-md-8">
<h5>Transformation matrix:</h5>
<div id="transformMatrix">
</div>
</div>
</div>
</div>
<div id="control" class="row container-fluid">
<div id="slider" class="col-md-2">
<input type="range" value="0" min="0" max="100" oninput="changePosition(this.value)" onchange="changePosition(this.value)" />
</div>
<!--div id="coordinate" -->
<div class="col-md-3"><span>X: </span><input id="newX" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Y: </span><input id="newY" type="number" step="0.0001" value=1 00></div>
<div class="col-md-3"><span>Z: </span><input id="newZ" type="number" step="0.0001" value=- 300></div>
<!--/div-->
<div class="col-md-3"><button id="change_destination" onclick="setNewDestination()">Set New Destination</button></div>
<div class="col-md-3"><button id="reset_camera" onclick="resetCamera()">Reset Camera</button></div>
</div>
<script src="js/main_script.js"></script>
</body>
Черная часть страницы с осями и содержимым динамически добавляется в div с id = point_display внутри div point, а матрица также динамически добавляется в div с id = `transformMatrix"
Пожалуйста, помогите мне выяснить, как предотвратить наложение элементов, чтобы при уменьшении ширины они просто укладывались один под другим.