Горизонтальное выравнивание эскизов к центру в Bootstrap 3

Question

Я пытаюсь иметь 3 эскиза горизонтально рядом друг с другом и центрироваться. Проблема в том, что они не сосредоточены. Мне также интересно, могу ли я упростить код, поскольку, например, <div class="column"> повторяется во всех трех частях. Однако, когда я пытаюсь это сделать, изображения стека вертикально, а не горизонтально, и я не уверен, почему. Итак, мои вопросы:

1. Как мне разместить 3 фотографий на странице?
2. Как упростить код без вертикального укладки изображений?

Текущий код

<div class="column"> 
    <div class="col-sm-6 col-md-3"> 
    <div class="thumbnail"> 
     <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>Lalalala</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="column"> 
    <div class="col-sm-6 col-md-3"> 
    <div class="thumbnail"> 
     <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>Lalalala</p> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="column"> 
    <div class="col-sm-6 col-md-3"> 
    <div class="thumbnail"> 
     <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>Lalalala</p> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Нет уверен, если я понял ваш вопрос правильно, но дал ему выстрелили в любом случае. Это то, что вы хотели?

я удалил все <div class="column"> и заменены одним <div class="row">

Я также установить размер Col, чтобы col-xs-4 для каждого эскиза.

Посмотрите на эту ссылку для примера с использованием кода: http://jsfiddle.net/p9k3x/

Answer 2

Если я понимаю, что вы просите правильно, вы должны:

1. Добавить <div class="container"> и <div class="row"> теги, ваш код .
2. Удалите <div class="column"> тег
3. Измените ваш <div class="col-sm-6 col-md-3"> на <div class="col-xs-4>

container класса центров элементов внутри этого DIV на странице. Вы хотите, чтобы все ваши классы col-xx-## вложены внутри <div class="row">. Кроме того, Bootstrap 3 является «Mobile First», поэтому все, что делается в группах классов col-xs-##, будет унаследовано большими разрешениями экрана. Причина использования класса col-xs-4 заключается в том, что вы хотите получить 3 полных столбца, поэтому вы хотите заняться 4 из 12 пространств столбцов. Это немного контрастный интуитивный. Here is some Bootstrap 3 documentation on the grid system.

Надеюсь, это ответит на ваш вопрос! Счастливое кодирование.

После того, как вы сделаете эти изменения код должен выглядеть следующим образом:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4"> 
     <div class="thumbnail"> 
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
      <div class="caption"> 
      <h3>Thumbnail label</h3> 
      <p>Lalalala</p> 
      </div> 
     </div> 
     </div> 

     <div class="col-xs-4"> 
     <div class="thumbnail"> 
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
      <div class="caption"> 
      <h3>Thumbnail label</h3> 
      <p>Lalalala</p> 
      </div> 
     </div> 
     </div> 

     <div class="col-xs-4"> 
     <div class="thumbnail"> 
      <img src="http://www.microsoft.com/global/en-us/news/PublishingImages/bod/billg/gates_print.jpg" alt="My Image" /> 
      <div class="caption"> 
      <h3>Thumbnail label</h3> 
      <p>Lalalala</p> 
      </div> 
     </div> 
     </div> 
    </div><!-- End Row Div --> 


</div><!-- End Container Div -->