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，其宽度根据其内部内容而变化。并且在子元素（按钮）中，它同时具有col-xs-4和btn-block类，但是btn-block设置width:100%并禁用col-xs-4（宽度：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。

Answer 2

在您的第一个示例中，div 被赋予了类“ col-xs-4”，因此其大小不会根据div内部的大小而变化。

在第二个示例中，div没有没有给出任何类，因此其大小将根据div内部的内容而变化。

第二个示例不起作用的原因是由于您的其他类也更改了按钮的大小。通过首先阅读“ col-xs-4”类，其大小被其他类之一取代。

Answer 3

您不能使用col-xs- *或任何带有按钮的按钮，但是如果您想调整按钮的大小，请参考此-> https://www.w3schools.com/bootstrap/bootstrap_buttons.asp