Bootstrap 4 Grid - 列中的子项不考虑宽度

Question

我注意到bootstrap 4网格列中的子节点可能超过其列的宽度.这是Bootstrap 4中的错误还是我们必须明确设置其子节点的最大宽度？

body {
  padding: 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button>
    </div>
    <div class="col-xs-4">hello</div>
    <div class="col-xs-4">oasfhsaolf</div>
  </div>
</div>

Answer 1

实际上,col-xs-4孩子们表现得很好 - 这是反叛者的按钮:)你可以通过检查元素并看到那些列子项是正确的宽度来看到这一点.

这个按钮行为是因为bootstrap的.btn类有white-space: nowrap,告诉按钮不包装其附带的文本.

根据您希望按钮显示的方式,您可以添加自定义white-spacecss属性(如inherit)以覆盖按钮的引导样式:

body {
  padding: 12px;
}
.btn.btn-outline-primary {
  white-space: inherit;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button>
    </div>
    <div class="col-xs-4">hello</div>
    <div class="col-xs-4">oasfhsaolf</div>
  </div>
</div>