具有一行响应高度的引导网格

我正在使用 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>

注意：它在小屏幕上中断

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

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

显示：表格;对于 .container显示：表行;对于 .row显示：表列;浮点型：无;对于 .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>

相关内容

最新更新

热门标签：