Bootstrap 4 - 左列宽度变化，取决于右列的内容答案

【问题标题】：Bootstrap 4 - left column width changes, depending upon content of right columnBootstrap 4 - 左列宽度变化，取决于右列的内容
【发布时间】：2021-01-03 06:38:03
【问题描述】：

我显然不知道足够的引导程序。我的目标是有这样的布局，一旦单击“加载报告”按钮并且有一些数据要报告：

上面有两列，第一列包含四个下拉列表和一个按钮；第二列包含一个表格。

第一次加载此页面时，表（在右列）不应该在那里，只有左列应该显示。但是当我第一次加载页面时，我看到左列缩小了：

在这种情况下，如果我将鼠标悬停在“加载报告”按钮上，我注意到只有左半边的按钮是可点击的。我猜那是因为它直接属于缩小的下拉列表。 butten 的右半部分不响应悬停或单击操作。但是一旦加载了右列（表格）（如第一张图片中所示），整个按钮就变为可点击并且所有下拉列表都采用所需的大小。

如果右列包含的任何内容的宽度小于显示的宽度，则左列仅以相对于右列宽度的百分比扩展。

我的理解是，一旦我说 col-md-2，它应该指示引导程序将 12 个空格中的 2 个授予左列，并且我放入其中的任何组件都应该扩展/调整大小以适应这个空间。这不对吗？我不明白为什么会这样。有什么建议吗？

代码详情

我在 Angular 中执行此操作，因此 html 分布在多个组件上。应用组件是这样的：

<div class="container">
    <div class="row">
        <h3>Ticket Status Report</h3>
    </div>
    <hr>
    <div class="row">
        <app-ticket-report></app-ticket-report>
    </div>
</div>

票务报告组件如下：

<div class="row">
<div class="col-md-2"> 
    <!-- Left Column Code Goes Here -->
</div>
<div class="col-md-10">
    <!-- Right Column Code Goes Here -->
</div>
</div>

备注

我在 Chrome 和 Firefox 中都试过了。所以排除了浏览器依赖。
我假设由于我在 App 组件中提供了“容器”div，我不必在工单报告组件中再次执行此操作。

【问题讨论】：

一个解决方案是您可以有条件地使用[ngClass] 指定类名，1. col-md-6 当右侧不可见时，2. col-md-2 当右侧可见时。

标签： angular bootstrap-4 grid bootstrap-grid

【解决方案1】：

在另一个 .row 中生成的嵌套 .row 可能会导致问题。
尝试更改以下内容：

<div class="container">
    <div class="row">
        <h3>Ticket Status Report</h3>
    </div>
    <hr>
    <div class="row">
        <app-ticket-report></app-ticket-report>
    </div>
</div>

到这里：

<div class="container">
    <div class="row">
        <h3>Ticket Status Report</h3>
    </div>
    <hr>
    <app-ticket-report></app-ticket-report>
</div>

或，从工单报告中删除包含.row：

<div class="col-md-2"> 
    <!-- Left Column Code Goes Here -->
</div>
<div class="col-md-10">
    <!-- Right Column Code Goes Here -->
</div>

【讨论】：