Как правильно перемещать объект с помощью Bootstrap

Question

Я пытаюсь поставить два бокса рядом друг с другом, но до сих пор второй объект всегда ниже первого. Это код, который я использую от getbootstrap.com.

Мне просто нужно, чтобы ящики, подобные этому, два появлялись рядом друг с другом не на разных линиях. Примечание. Я попытался использовать это в CSS float: left; К сожалению, ничего хорошего не произошло.

<div class="row"> 
    <div class="col-xs-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
      <img src="..." alt="..."> 
     </a> 
    </div> 
</div> 

Answer 1

Кажется, у вас есть только одна коробка. Вы должны сделать некоторое чтение в идее столбцов, которая находится за сеткой бутстрапа twitter: http://getbootstrap.com/css/#grid-intro.

Я предполагаю, что вы пытаетесь получить смесь поведения для мобильных и настольных компьютеров (путем смешивания col-xs и col-md с разными размерами ячеек).

<!-- make both columns same length one next to the other --> 
<div class="row"> 
    <div class="col-xs-6">.col-xs-6</div> 
    <div class="col-xs-6">.col-md-4</div> 
</div> 

.col-хз-12 .col-й мкр-8 .col-хз-6 .col-й мкр-4

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
<div class="row"> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 

<!-- Columns are always 50% wide, on mobile and desktop --> 
<div class="row"> 
    <div class="col-xs-6">.col-xs-6</div> 
    <div class="col-xs-6">.col-xs-6</div> 
</div> 

Answer 2

Я думаю, что вы ищете что-то как этого http://www.layoutit.com/build

 <div class="container-fluid"> 
     <div class="row"> 
       <div class="col-md-6"> 
"Box" 1 
       </div> 
       <div class="col-md-6"> 
"Box" 2 
       </div> 
      </div> 
     </div>