Позиционирование изображений сетки загрузки

Question

Я не могу решить эту проблему, пожалуйста, помогите. Я делаю адаптивный сайт с сеткой бутстрапа и не могу найти четыре изображения в одной строке. изображения должны быть рядом без каких-либо интервалов и интервалов. У меня есть код:

<div class="main_boxes"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <div class="one"> 
         <img src="img/one.png" /> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="two"> 
         <img src="img/two.png" /> 
        </div>  
       </div> 
       <div class="col-md-3"> 
        <div class="three"> 
         <img src="img/three.png" /> 
        </div> 
       </div> 
       <div class="col-md-3"> 
        <div class="four"> 
         <img src="img/four.png" /> 
        </div> 
       </div>     
      </div> 
     </div> 
    </div> 

Изображения 295x150 и с интервалами в браузере

Answer 1

Я сделал скрипку, без разницы/дополнения, как это:

http://jsfiddle.net/Le6oosvo/2/

I используется этот HTML:

<div class="main_boxes"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="one"> 
         <img class="img-responsive" src="http://lorempixel.com/295/150" /> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="two"> 
         <img class="img-responsive" src="http://lorempixel.com/295/150" /> 
        </div>  
       </div> 
       <div class="col-sm-3"> 
        <div class="three"> 
         <img class="img-responsive" src="http://lorempixel.com/295/150" /> 
        </div> 
       </div> 
       <div class="col-sm-3"> 
        <div class="four"> 
         <img class="img-responsive" src="http://lorempixel.com/295/150" /> 
        </div> 
       </div>     
      </div> 
     </div> 
    </div> 

И это немного CSS:

.main_boxes .col-sm-3 { 
padding-left: 0px; 
padding-right: 0px; 
} 

я использовал .col-см-3 вместо .COM-MD-3, чтобы сделать изображение выравнивания на стороне друг друга больше (если вы сжимаете его). Я также добавил класс bootstrap, чтобы сделать изображения восприимчивыми.

Answer 2

Пусть ваши изображения 200px wide и 200px high. Вы можете попробовать что-то вроде

<div class="container"> 
    <div class="row"> 
    </div> 
    <div class="col-md-3"> 
    <image src="image1.jpg"></img> 
    </div> 
    <div class="col-md-3"> 
    <image src="image2.jpg"></img> 
    </div> 
    <div class="col-md-3"> 
    <image src="image3.jpg"></img> 
    </div> 
    <div class="col-md-3"> 
    <image src="image4.jpg"></img> 
    </div> 
</div> 

bootstrap grid на 12 столбцов в ширину. Это означает, что столбцы должны содержать до 12. Вы можете сделать это, сделав четыре div по три столбца каждый. Это будет выглядеть примерно так, когда будет сделано

Image 1    Image 2    Image 3   Image 4 

Надеюсь, это поможет.

Answer 3

Добавьте класс img-responsive к каждому <img> теге так:

<div class="main_boxes"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-3"> 
       <div class="one"> 
        <img class="img-responsive" src="img/one.png" /> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="two"> 
        <img class="img-responsive" src="img/two.png" /> 
       </div>  
      </div> 
      <div class="col-md-3"> 
       <div class="three"> 
        <img class="img-responsive" src="img/three.png" /> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div class="four"> 
        <img class="img-responsive" src="img/four.png" /> 
       </div> 
      </div>     
     </div> 
    </div> 
</div>