Bootstrap列在调整大小时不起作用

我遇到问题，如果我将浏览器调整为较小的大小，列不起作用，而是每个图像显示在不同的行中。它在这里显示：Bootstrap列在调整大小时不起作用

它在其中显示一排四个图像尺寸较大正常工作。有没有人知道这个问题的解决办法？

<div class="container"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class="col-sm-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
    </div> 
    </div> 
</div>

来源

2017-04-07 user3461866

这是它使用'col-sm-3'时的工作方式，请尝试'col-xs-3'。 – hungerstar

这使得图片保持在同一行，但现在图像互相重叠。 – user3461866

您正在使用设置尺寸，使用'img-responsive'类并移除'height'和'width'属性。 – hungerstar

首先你不应该使用两个容器。其次：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <a href="#"><img src="https://www.w3schools.com/bootstrap/sanfran.jpg" alt="Smiley face" height="267" width="187"></a> 
 
     </div> 
 
    </div> 
 
    </div>

可正常工作，因为col-sm-*只以上767px应用。对于较小的屏幕，您应该使用col-xs-*。

来源

2017-04-07 16:02:51 user31782

@hungerstar这是一个很好的建议。考虑一下'.row'和'.col'深层嵌套和另一个'.container'在行和列的嵌套深处使用的情况。让我找到bootstrap doc提供相同的参考。 – user31782

@hungerstar here _gettaootstrap.com/css/#overview-type-links in _Containers_ section，second line：_“请注意，由于填充等原因，两个容器都不可嵌套。”_。 – user31782

col-sm- for tablet view。 col-xs-移动视图。

<div class="container-fluid"> 
    <div class="row"> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
     <div class=" col-sm-3 col-xs-3"> 
     <a href="#"><img src="smiley.gif" alt="Smiley face" height="267" width="187"></a> 
     </div> 
    </div> 
    </div>

来源

2017-04-07 15:56:36

两个容器不应该在bootstrap中使用 – user31782

@ user31782如果我想要全屏显示的背景，但内容在中间怎么办？ – Morpheus

@hungerstar我在说'.container'和'.container-fluid'。 – user31782

请从img标签中删除width =“187”和height =“267”。你可以添加style =“max-width：187 px; width：100％;”而不是这个。与img标签。我认为它会起作用。请尝试。在移动设备中，如果您想要在一行中看到4个图像，则应添加“col-xs-3”类和“col-sm3”。

来源

2017-04-07 16:00:33

您为图像添加了固定宽度。你的问题的原因是没有空间来容纳4个图像。请认为一个图像的宽度为187px。所以4张图片需要748px。宽度低于748px的设备没有空间。所以你需要调整图像的小设备 –

因此，只需尝试我的回答 –

Bootstrap列在调整大小时不起作用

回答

相关问题