html - 为什么列宽可以应用于 div 而不是按钮？

Question

这很好用，使按钮 size 4

<div class="col-xs-4">
    <button class="btn btn-block btn-primary">Like</button>
</div>

但以下不起作用:

<div>
    <button class="col-xs-4 btn btn-block btn-primary">Like</button>
</div>

这对我来说没有意义，因为我认为 div 只是一个容器，它的样式/类被传递给它的元素。

Answer 1

col-xs-4 将当前元素的 width 设置为大约 33% 和 btn-block 集当前元素的 width 到 100%。

在这段代码中，父元素的 width (div) 是 33%(因为 col-xs-4)，子元素的宽度是100%(因为 btn-block)。

<div class="col-xs-4">
    <button class="btn btn-block btn-primary">Like</button>
</div>

在接下来的代码中，父级div的显示是block，它的宽度根据里面的内容而变化。在子元素 (Button) 中，它同时具有 col-xs-4 和 btn-block 类，但是 btn-block 设置了 width:100% 并禁用 col-xs-4 (width:33%) 效果。

<div>
    <button class="col-xs-4 btn btn-block btn-primary">Like</button>
</div>

如果你删除 btn-block 你会看到 col-xs-4 工作正常并设置 width:33%

<div>
    <button class="col-xs-4 btn btn-primary">Like</button>
</div>

我创建了一个 fiddle给你。