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

Question

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

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

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

在这种情况下，如果我将鼠标悬停在“加载报告”按钮上，我会注意到只有左半部分的按钮是可点击的。我猜这是因为它直接属于缩小的下拉列表。 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>

注意事项

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

Answer 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>

OR，从票证报告中删除包含 .row 的内容：

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