html - 图像未使用 Bootstrap 正确占用列

Question

我看不出有什么问题。在小型显示器和更高的显示器上，每个图像应该占用 4 个，只有 XS 显示器每个图像应该占用 12 列，这意味着每个图像每次占用一个新行，但它并没有这样做。

<div id="homenav" class="container">
    <div class='row'>
        <div class="col-xs-12 col-sm-4">
            <button type="button" class="thumbnail pmbutton">
                <img src="images/matchingpairs.jpg" alt="Pair Match">
                <p>Pair Match</p>
            </button>
        </div>
        <div class="col-xs-12 col-sm-4">
            <button type="button" class="thumbnail ssbutton">
                <img src="images/shapes.jpg" alt="Super Shapes">
                <p>Super Shapes</p>
            </button>
        </div>
        <div class="col-xs-12 col-sm-4">
            <button type="button" class="thumbnail ccbutton">
                <img src="images/counting.jpg" alt="Cool Counting">
                <p>Cool Counting</p>
            </button>
        </div>
    </div>
</div>

Answer 1

这应该会改变您的行大小；

<div class="row col-xs-12 col-sm-4 col-lg-4 col-md-4">

这应该会改变相应行内的按钮大小；

<button type="button" class="thumbnail ssbutton col-xs-12 col-sm-4 col-lg-4 col-md-4">

这应该会改变相应按钮内的图像大小；

<img src="images/matchingpairs.jpg" alt="Super Shapes" class = "col-xs-12 col-sm-4 col-lg-4 col-md-4" />

或者您可以创建自己的 CSS 类来调整图像大小，并将此类名称作为类属性赋予每个图像。

希望对您有所帮助。

卡格里