Bootstrap - 3列 - 我創建圖像的寬度是多少？

我正在使用引導程序（12列），我想每列3個圖像。我不知道圖像的寬度應該是多少。我試過這個：
70（col width）* 3colums + 60（30px gutter）= 270px。Bootstrap - 3列 - 我創建圖像的寬度是多少？

但是，如果大型監視器上的頁面不是全寬，則列會換行。

我應該創建每個圖像的寬度是多少？

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <img src="images/our-work.png" class="img-responsive" /> 
    </div> 
    <div class="col-md-4"> 
     <img src="images/galleries.png" class="img-responsive"/> 
    </div> 
    <div class="col-md-4"> 
     <img src="images/news.png" class="img-responsive" /> 
    </div> 
    </div> 
</div>

來源

2014-02-05 user995727

如果您正在使用COL-MD-4爲您列，這意味着，任何視口低於992個像素將改變滿12列寬。這也意味着您可能需要的最大寬度使圖像基於下一個較小列寬（col-sm-）的容器大小（750）。然後減去容器上的填充= 720像素寬度。

.container { 
    padding-right: 15px; 
    padding-left: 15px;

你可以做得更大以保證安全，因爲你使用的是img-responsive，但是720應該就足夠了。

來源

2014-02-06 13:47:08 moodyjive

我有點困惑。如果我製作每張圖像720,720 * 3 =比任何容器更寬。也許我錯誤地閱讀了你的建議。我應該製作每張圖像的寬度（最大）？對困惑感到抱歉。 – user995727

沒問題。當您在中視口（col-md-）下方關閉瀏覽器時，容器大小將變爲750px，並且這些列彼此堆疊併成爲該行的全部寬度（12列）。此時，行大約與容器的寬度相同。這基於您提供的代碼。它也可以在Bootstrap的jumbotron示例中看到：http://getbootstrap.com/examples/jumbotron/再次，720基於col-md大小下面的列的最大全寬度 – moodyjive

@ user995727'class =如果圖像大於列，「img-responsive」會縮小圖像大小。該列最大寬度可達720px。因此，你使你的圖像720px的寬度，讓'img-responsive'讓它們適合 – SparK

Bootstrap - 3列 - 我創建圖像的寬度是多少？

回答

相關問題