问题描述
我显然不知道足够的引导程序。我的目标是拥有这样的布局,一旦单击“加载报告”按钮并且有一些数据要报告:
上面有两列,第一列包含四个下拉列表和一个按钮;第二列包含一个表格。
当这个页面第一次加载时,表格(在右列)不应该在那里,只应该显示左列。但是当我第一次加载页面时,我看到左列像这样缩小了:
在这种情况下,如果我将鼠标悬停在“加载报告”按钮上,我会注意到只有左半部分的按钮是可点击的。我猜这是因为它直接属于缩小的下拉列表。 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,因此我不必在工单报告组件中再次执行此操作。
解决方法
结果嵌套在另一个 .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>