Bootstrap Column不是垂直扩展的

时间:2016-09-13 15:53:04

标签: html css twitter-bootstrap twitter-bootstrap-3

  <body>
    <div class="container">
      <div class="row">
          <div class="col-xs-12" style="background-color:red;">
              dfsasfssssssssssssssssssssssssssssssssssssssssssssss
          </div>
      </div>
    </div>
  </body>

PLUNK to edit

这可能非常明显,但我认为bootstrap列与内容垂直扩展。我没有。

奖金问题:引导程序是否始终默认行为缩进“容器” - 我该如何避免这种情况?

1 个答案:

答案 0 :(得分:3)

该引导程序的正常行为,因为col-*-*设置为float:left,因此您需要使用word-wrap:break-word,因为您的文本中没有空格。

为了避免您提到的缩进(引导程序添加到padding的默认.container),您可以按设置.container {padding:0}重置

&#13;
&#13;
.col-xs-12 {
  background:red; /* demo */
  word-wrap: break-word
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      dfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssssdfsasfssssssssssssssssssssssssssssssssssssssssssssss
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

相关问题