Angular 5中使用*ngFor实现Bootstrap并排表格布局问题

嘿，我看你在Angular项目里尝试用Bootstrap实现表格并排，但没达到预期效果对吧？问题主要出在没有给表格套上Bootstrap的列容器，另外你的表格结构里还有点小问题，我帮你一起修正：

问题分析 #

Bootstrap的.row需要配合.col-*系列类才能实现元素并排——row是行容器，col才是分配宽度的列单元。你现在只把表格放在row里，但没给每个表格加col包裹，所以它们还是会默认上下堆叠。另外，你在<tr>里直接放<div>是不符合HTML表格规范的，这也可能导致样式或渲染异常。

修正后的代码示例 #

<div class="panel-body">
  <div class="row">
    <!-- 第一个表格：占6列（中等屏幕及以上并排） -->
    <div class="col-md-6">
      <table class="table">
        <tr *ngFor="let property of getKeyValues(navbarService.countriesOzetInfo[0].properties)">
          <!-- 把ngIf移到tr上，避免破坏表格结构 -->
          <tr *ngIf="navbarService.countriesOzetInfo[0].properties[property] != null">
            <td>
              <a href="#" class="btn btn-danger btn-lg" role="button">
                <span class="glyphicon glyphicon-star"></span> {{ property }}
              </a>
            </td>
            <td>{{ navbarService.countriesOzetInfo[0].properties[property] }}</td>
          </tr>
        </tr>
      </table>
    </div>

    <!-- 第二个表格：同样占6列，和第一个并排 -->
    <div class="col-md-6">
      <table class="table">
        <!-- 这里放第二个表格的内容，结构和第一个一致 -->
        <tr>
          <td>第二个表格内容</td>
        </tr>
      </table>
    </div>
  </div>
</div>

关键改动说明 #

• 给每个表格外层添加了.col-md-6：中等屏幕（≥768px）时两个表格各占50%宽度并排，小屏幕会自动堆叠成上下布局，响应式友好。你也可以根据需求换成col-sm-6、col-lg-4等其他列类。
• 把*ngIf从div移到了<tr>上：符合HTML表格的结构规范，避免浏览器渲染异常。
• 去掉了不必要的this.：在Angular模板里调用组件属性/方法时，不需要加this.，直接用变量名即可。

如果你的Bootstrap样式还是没生效，记得检查一下项目是否正确引入了Bootstrap的CSS文件（比如在angular.json里配置，或者在index.html里引入CDN链接）。

内容的提问来源于stack exchange，提问作者MadMax