我想让下面的代码以浏览器窗口大小的方式工作,以便每个网格单元格中的文本始终保留在屏幕上。如果没有更多的空间来显示文本,并且我希望文本在行上被拆分,则由于某种原因,以下代码会削减文本的末尾。如何在bootstrap 3网格中获得响应文本?
<html>
<head>
<title></title>
<script src="scripts/jquery-2.0.3.js"></script>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div style="background:gray" class="col-xs-12 col-sm-12 col-md-12">
<h5 class="text-center">Title</h5>
</div>
</div>
<div class="row">
<div style="background:green" class="col-xs-3 col-sm-3 col-md-3">
<p>cell1cell1cell1cell1cell1cell1</p>
</div>
<div style="background:red" class="col-xs-3 col-sm-3 col-md-3">
<p>cell2cell2cell2cell2cell2cel22</p>
</div>
<div style="background:blue" class="col-xs-6 col-sm-6 col-md-6">
<p>cell3cell3cell3cell3cell3cell3</p>
</div>
</div>
<div class="row">
<div style="background:gray" class="col-xs-12 col-sm-12 col-md-12">
<button type="button" class="btn btn-default btn-sm pull-right"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
<button type="button" class="btn btn-primary btn-sm pull-right"><i class="glyphicon glyphicon-ok"></i> Ok</button>
</div>
</div>
</div>
</body>
</html>