如何确保子 html 元素不会脱离引导列

Question

我在下面附加了一个指向我的父元素的链接，基本上是<div class="col-md-8">:-

下面我附上从父元素流出的子元素的图像：-

如何开始检查此问题以找出子元素流出父元素的原因。我试图确保留在父元素内。

Answer 1

基本上。它流出是因为它的表不适合col-md-8。

它的列太多了。

为避免溢出，您可以在col-md-8 中添加：overflow-auto 使其水平滚动。

没有overflow-auto的例子

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      some content
    </div>
    <div class="col-md-8" style="background-color: blue">
      <table>
        <tbody>
          <tr>
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
            <td>column 5</td>
            <td>column 6</td>
            <td>column 7</td>
            <td>column 8</td>
            <td>column 9</td>
            <td>column 10</td>
            <td>column 11</td>
            <td>column 12</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

overflow-auto 示例

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      some content
    </div>
    <div class="col-md-8 overflow-auto" style="background-color: blue">
      <table>
        <tbody>
          <tr>
            <td>column 1</td>
            <td>column 2</td>
            <td>column 3</td>
            <td>column 4</td>
            <td>column 5</td>
            <td>column 6</td>
            <td>column 7</td>
            <td>column 8</td>
            <td>column 9</td>
            <td>column 10</td>
            <td>column 11</td>
            <td>column 12</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>