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

Posted 2023-03-06

【中文标题】如何确保子 html 元素不会脱离引导列

【英文标题】：How to make sure that child html element does not get out of bootstrap columns

【发布时间】：2021-11-23 08:32:47

【问题描述】：

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

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

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

【问题讨论】：

你能分享你得到的错误

请查看我添加的图像，在第一个图像中我有引导列，它是一个父 div，在第二个图像中有一个子元素正在父元素之外。我试图确保子元素不会超出父元素。 @巴斯塔

【参考方案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>

【讨论】：

非常感谢，但在底部滚动不是我的选择。

所以唯一的办法就是减少侧边栏的内容

你也可以自定义scrollbr样式