我看不出有什么问题。在小型显示器和更高的显示器上,每个图像应该占用 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>
最佳答案
这应该会改变您的行大小;
<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 类来调整图像大小,并将此类名称作为类属性赋予每个图像。
希望对您有所帮助。
卡格里
关于html - 图像未使用 Bootstrap 正确占用列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35323555/