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可能是值得的，因为表格单元格会对行中其他位置的换行做出反应，即使该特定单元格确实存在，也会延伸到第二行不需要自己。

Answer 2

实现了它显示：表; for .container 显示：表排;为.row 显示：表柱;浮动：无;对于.col

＆＃13;

<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>

＆＃13;

具有响应高度的行的Bootstrap网格

2 个答案: