我使用 Twitter Bootstrap 4 Alpha 2 创建了一个测试 html 页面。如下所示,我有三个 div,每个都有 col-md-4。第一个 div 包含用 p 包裹的文本。问题是文本超出了它的容器,占用了其他 2 个 div 的空间。如何将文本保留在自己的栏中?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<style>
div {
border-style: solid;
border-color: #0000ff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.mi1n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
这是 100% 的工作:
p{word-break: break-all;}
关于html - Div 中的 Twitter Bootstrap 文本超出了其列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35875318/