Question

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

＆＃13;

body {
  padding: 12px;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

根据您希望按钮显示的方式，您可以添加自定义white-space css属性（如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>

Answer 2

尝试删除按钮，引导网格遵循规则

查看此http://jsbin.com/naruqutaqo/edit?html,output

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

2 个答案: