Div中的Twitter Bootstrap文本超出了其列

时间:2016-03-08 18:37:08

标签: html css twitter-bootstrap

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

2 个答案:

答案 0 :(得分:1)

这是100%为你工作:

p{word-break: break-all;}

答案 1 :(得分:0)

添加&#39;溢出:自动;&#39;你的风格代码。

       border-style: solid;
       border-color: #0000ff;
       overflow:auto;