BootStrap 3.0 网格系统不包含文本？答案

【问题标题】：BootStrap 3.0 grid system not containing text?BootStrap 3.0 网格系统不包含文本？
【发布时间】：2017-05-07 17:22:34
【问题描述】：

我只是在学习新的引导网格系统，但是它与 2.x 非常不同，我似乎无法让它包含任何东西，它只是流出来。

截图：http://i.imgur.com/aBVgNVr.png

代码：http://pastie.org/8272634

 <!DOCTYPE html>
 <html>
<head>
    <title>ICG - Home</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/over.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="assets/js/html5shiv.js"></script>
      <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" id="blue" href="#">iCanGame</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">Community</a></li>
            <li><a href="#contact">All Games</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#login">Login</a></li>
            <li><a href="#register">Register</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <div id="navend"></div>
    <div class="container">
              <div class="row">
                <div class="col-xs-10">left</div>
                <div class="col-xs-2"><div class="wrap">sdsafdsafdsafdsafdsafdsajlsdhakfhdksahlfdsahkfldsakfhkdsakfdkjslahfdskhaflhdksaklfhdsaklfdkhsa</div></div>
              </div>
    </div>
    <script src="assets/js/jquery.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

【问题讨论】：

谁编辑了我的帖子，谢谢！

标签： html css twitter-bootstrap-3

【解决方案1】：

好吧，文本已经溢出，因为您的示例文本是一个单词，您没有在它们之间包含任何空格... 请在下面找到代码..

<div class="row">
                <div class="col-xs-10"><p>left</p></div>
                <div class="col-xs-2"><div class="wrap"><p>
sdsafds dhakfhdks ahlfdsahkf ldsakfhk   dsakfdkj slahfd skhafl   hdksaklfhds aklfdkhsa</p>   </div></div>


</div>

【讨论】：

我不知道这很重要。

【解决方案2】：

您正在使用两个 .col-md-12，您不应该只使用两个 .col-md-6 类，因为 。 col-md-12 是 width:100% div 吗？

【讨论】：

【解决方案3】：

因为你给出了一个不包含空格的单词。

例如：像 adfjklsdjfaksdjfsakldjfsakl;fjsakl;djf 这样的字符串 不起作用。

相反，像 asdfkljsd;lf asdfkjds asdkfjklj 这样的字符串 会起作用

并且网格系统不会将单个单词分成两行。

顺便说一句，通过打字来测试段落不是一个好主意。

试试paragraph generator 生成随机段落。

【讨论】：