css - Bootstrap 3 似乎根据字段的大小以不同方式证明表列的合理性

Question

我有一个使用 bootstrap 设计的简单表格，但出于某种原因，它会根据字段的长度使用不同的对齐方式。似乎有 2 种不同的设置。

1. 如果行数据很短，它会在第一个单元格旁边左对齐并保持两个字段都很短。
2. 如果数据很长，比如超过一行可以容纳的数据，它会右对齐。

我想知道是否只选择了#2 来证明？我确实在一个面板中放置了整个表格。

在 HAML 中，面板主体的代码如下所示:

.panel-heading
  %h3.panel-title Case Information
%table.panel-body.table
  - unless current_user.one_user?
    - unless current_user.another_user?
      %tr.col-md-12
        %th.col-md-3 Patient Name
        %td.col-md-9= patient_full_name

      %tr.col-md-12
        %th.col-md-3 Patient Date of Birth
        %td.col-md-9= patient_birthdate

    %tr.col-md-12
      %th.col-md-3 Patient Age
      %td.col-md-9= patient_age

    %tr.col-md-12
      %th.col-md-3 Patient Gender
      %td.col-md-9= patient_gender

 -unless kase.medical_history.nil?
   %tr.col-md-12
     %th.col-md-3 Medical History
     %td.col-md-9= simple_format medical_history

 -unless kase.medications.nil?
   %tr.col-md-12
     %th.col-md-3 Medications
     %td.col-md-9= simple_format medications

这是短数据的样子:

这是长数据的样子:

您注意到长字段在某种 block 对齐方式中了吗？我希望正确的表格列全部排成一行，就好像它们都是长数据一样。

如有任何帮助，我们将不胜感激。

Answer 1

我将其添加为评论而不是答案，所以它是:我在我的计算机上做了一个小测试，看看是否从 %tr 中删除“.col-md-12”修复了对齐问题。