Bootstrap 3 Overlap

Question

Я использую Bootstrap 3 и хотел бы, чтобы эти две сетки, которые я использую в демонстрационной версии JS Fiddle ниже, складываются друг на друга вместо перекрытия.

<div class="col-xs-12 col-md-8"> 

перекрывается над

<div class="col-xs-6 col-md-4"> 

мне просто нужно их укладывать друг на друг, так что "" нав нав-таблетку нав стеки»не скрыт .

JS Fiddle example demo

Вот HTML код

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-md-4"> 
      <ul class="nav nav-pills nav-stacked" style="max-width: 300px; background-color: #fff;"> 
       <li class="active"> <a href="#">link1</a> 

       </li> 
       <li> <a href="#">link2</a> 

       </li> 
       <li> <a href="#">link3</a> 

       </li> 
       <li> <a href="#">link4</a> 

       </li> 
      </ul> 
     </div> 
     <div class="col-xs-12 col-md-8"> 
      <div class="Rectangle_3_copy_2"> 
       <div class="Rounded_Rectangle_2"></div> 
      </div> 

Answer 1

Вы хотите, чтобы стек? Из документов бутстрапа.

Не хотите, чтобы ваши столбцы просто складывались на более мелкие устройства? Используйте дополнительные классы сетки средних и средних устройств, добавив в свои столбцы .col-xs- * .col-md- *. См. Пример ниже, чтобы лучше понять, как все это работает.

Так что если вы удалите col-xs-*, тогда он будет складываться.

Bootply Demo

Answer 2

Вы после того, как что-то вроде этого? http://jsfiddle.net/KCnJg/4/

<div class="container"> 
<div class="row"> 
    <div class="col-xs-6 col-md-4"> 
     <ul class="nav nav-pills nav-stacked" style="max-width: 300px; background-color: #fff;"> 
      <li class="active"> <a href="#">link1</a></li> 
      <li> <a href="#">link2</a></li> 
      <li> <a href="#">link3</a></li> 
      <li> <a href="#">link4</a></li> 
     </ul> 
    </div> 
</div> 
<div class="row">  
    <div class="col-xs-12 col-md-8"> 
     <div class="Rectangle_3_copy_2"> 
      <div class="Rounded_Rectangle_2"></div> 
     </div> 
    </div> 
</div>