Bootstrap 具有响应行高度的网格

Question

我正在使用 border-right 来分隔 Bootstrap 网格中的列。但是当一个单元格在较小的屏幕中占据更多高度时，这条垂直线（右边界）就会中断。所以基本上，我希望一行中的所有单元格都占据相同的高度。这是我的标记示例：

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="bootstrap.min.css"/>
  <style>
   div.col-xs-7, div.col-xs-1{
    border-right:1px solid black;
   }
   div.row{
   border-bottom: 1px solid black;
   }
  </style>
 </head>
 <body>
  <div class = "content">
   <div class="row">
    <div class = "col-xs-7 col-md-5">Medical History Unknown</div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">n</div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">n</div>
   </div>
   <div class="row">
    <div class = "col-xs-7 col-md-5">Heart Condition (CHF, Angina, Heart Attack) </div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">y</div>
   </div>
   <div class="row">
    <div class = "col-xs-7 col-md-5">Anemia</div>
    <div class = "col-xs-1">n</div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">n</div>
    <div class = "col-xs-1">y</div>
   </div>
   <div class="row">
    <div class = "col-xs-7 col-md-5">Epilepsy, Seizure </div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">y</div>
    <div class = "col-xs-1">n</div>
    <div class = "col-xs-1">n</div>
   </div>
  </div>
 </body>
</html>

注意：在小屏幕下会中断

Answer 1

出现此问题是因为只有带换行符的 <div> 延伸到第二行，而其他单元格仍在一行。

由于此数据本质上是表格形式，因此可能值得使用 table，因为 table 单元格会对行中其他地方的换行符做出反应，延伸到第二行即使那个特定的单元格本身不需要。

Answer 2

实现了 display:table;对于.container display:table-行；对于.row display:table-列；浮动：none；对于 .col

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>
 <head>
  
  <style>
   div.col-xs-7, div.col-xs-1{
    border-right:1px solid black;
   }
   div.row{
   border-bottom: 1px solid black;
   }
   .TableStyle {
      display:table;
      padding-left:0px;
      padding-right:0px;
     }
   .RowStyle {
    display:table-row;
   }
   .ColumnStyle {
    display:table-cell;
    float:none;
   }
  </style>
 </head>
 <body>
  <div class = "container TableStyle">
   <div class="row RowStyle">
    <div class = "col-xs-7 col-md-5 ColumnStyle">Medical History Unknown</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">n</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">n</div>
   </div>
   <div class="row RowStyle">
    <div class = "col-xs-7 col-md-5 ColumnStyle">Heart Condition (CHF, Angina, Heart Attack) </div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
   </div>
   <div class="row RowStyle">
    <div class = "col-xs-7 col-md-5 ColumnStyle">Anemia</div>
    <div class = "col-xs-1 ColumnStyle">n</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">n</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
   </div>
   <div class="row RowStyle">
    <div class = "col-xs-7 col-md-5 ColumnStyle">Epilepsy, Seizure </div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">y</div>
    <div class = "col-xs-1 ColumnStyle">n</div>
    <div class = "col-xs-1 ColumnStyle">n</div>
   </div>
  </div>
 </body>
</html>

Bootstrap 具有响应行高度的网格

Bootstrap Grid with Responsive height for a row

html

css

twitter-bootstrap