Question

我刚刚开始学习Bootstrap，并正在尝试在网页中实施它。但是我在防止引导程序类div相互重叠方面遇到麻烦。在全屏模式下，网页如下所示：

将窗口的宽度减小一定程度后，它变为：

并使窗口几乎与移动屏幕一样小，我得到以下信息：

我为此的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 point_display内部的id = point的div中，矩阵也被动态添加到id =`transformMatrix“的div中

请帮助我弄清楚如何防止元素重叠，以便在减小宽度时将它们堆叠在另一个下面。

如何防止Bootstrap类重叠？

0 个答案: