Bootstrap Колонка в колонке

Question

Это наглядная демонстрация: Image

Я пытаюсь поставить в моем ноутбуке колонке (кол-мкр-8) второй столбец, но когда я пытаюсь, другой ушел под колонну ноутбук, как я могу поместить второй столбец (col-md-6) внутри столбца ноутбука, и этот ноутбук ноутбука по-прежнему имеет полный размер.

Answer 1

Вы сказали, что вы хотите реагировать, так что вы должны:

• Держите соотношение сторон ноутбука элемент так же, как изображение.
• Имейте элемент экрана, который всегда будет заполнять экран ноутбука, даже если размер изображения ноутбука изменится из-за его заполнения родительского элемента.

Если я прав, вы хотите:

HTML:

<div class="row"> 
    <div class="col-xs-8 laptop"> 
     <div class="row"> 
      <div class="col-xs-offset-3 col-xs-9 screen"> 
       This column need to go in laptop screen 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

.laptop { 
    background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */ 
    padding-bottom: 89.32%; 
} 

.screen { 
    background: red; 
    /* Make sure this element is always the size of the screen */ 
    padding-bottom: 64%; 
} 

Я вычислил соотношение сторон изображения, чтобы быть 89.32~% путем деления ширины на высоту, соответственно 2084px и 2333px.

Вот codepen пример http://codepen.io/anon/pen/aNqKZL

UPDATE

В первом примере .screen элемент выходит за экран ноутбука из-за него растягивается на его содержание. Вот версия, которая имеет дело с этим http://codepen.io/anon/pen/qZxKRo

Answer 2

Вы хотите как это? Это очень короткое и грязное описание, которое у вас есть. Поэтому я надеюсь, что я прав.

<div class="row"> 
    <div class="col-md-8 col-sm-12"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-6"> 
       Laptop Image 
      </div> 
     </div> 
    </div> 
</div> 

классы «Col-мкр-8 цв-см-12» будет держать ваше содержание колонки, как вам нравится с точки зрения планшета + зрения рабочего стола, но когда она становится меньше, как взгляд смартфон, он будет расширяться в столбце полной ширины, и вы все равно сможете увидеть свои вещи внутри колонки ноутбука.

Пожалуйста, прочтите документацию по загрузке от here. Все, что вы хотите, чтобы быстро google устранит ваши проблемы, или мы здесь, в stackoverflow, чтобы помочь вам. :)

Update

Это то, что вы хотите, не так ли? https://jsfiddle.net/5jrt314r/2/

Теперь все, что входит в этот класс .inside, будет зависеть от размера вашего ноутбука. Он будет автоматически горизонтально и вертикально центрироваться по классу .laptop.