如何确保子 html 元素不会超出 bootstrap 列

Question

我将 link 附加到我下面的父元素，它基本上是 <div class="col-md-8">:-

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

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

Answer 1

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

它的列太多了。

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

示例没有 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>

如何确保子 html 元素不会超出 bootstrap 列

How to make sure that child html element does not get out of bootstrap columns

html

css

grid

twitter-bootstrap

twitter-bootstrap-3