Question

  <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列与内容垂直扩展。我没有。

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

Answer 1

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

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

＆＃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;

Bootstrap Column不是垂直扩展的

1 个答案: