bootstrap3 вложенных строки некорректного поведение

Question

Я-то недоразумение о вложенных строках с Bootstrap ...

• скажем, у меня есть контейнер 1200px.
• , тогда у меня есть первый div с col-lg-4, который означает 400px для первого уровня.
• внутри этого col-lg-4 Я создаю ряд второго уровня, я понимаю, что новая строка будет действовать как контейнер.

Новая ширина строки должна использоваться для вычисления разбивки столбцов, здесь 400px будет означать «col-xs», я понял, что это неправильно?

screenshot of the problem

<div class="container" style="border:1px solid"> 
    <div class="row"> 
    Let's say the container is 1200px 
    </div> 
    <div class="row"> 
    <div class="col-lg-4"> 
     <div class="row" style="border:1px solid blue;"> 
       This div size should be 1200/4=300px (which means <b>col-xs</b> only should be active)    
      </div> 
      <div class="col-sm-6 col-md-4 col-lg-3"> 
       <div style="border:1px solid red;"> 
       But it is always using col-lg-3, instead of col-sm-6 
       </div> 
      </div> 
    </div> 
    </div> 
    How can I have the red box to use the <b>xs/sm</b> size and use half of the 300px ? 
</div><!-- /.container --> 

Code Example available here

Из приведенного примера, как я мог иметь красный узел использовать COL-SM-6 вместо Col-LG-3?

мне нужно, чтобы заставить его думать, что это на маленьком экране вместо большой ...

Answer 1

Ширина вложенного столбца относительно его родителей, но не зависит от экрана точек останова, как col-xs. Контрольные точки l, m, sm, xs относятся только ко всему экрану/видовому экрану, а не к родительскому контейнеру. Может быть, это будет яснее, если вы подумаете об этом в процентах вместо пикселей.

col-*-4 является шириной контейнера 33%

col-*-6 является шириной контейнера 50%

Таким образом, хотя вы расчет 400px о праве на 1200px видовых, он не собирается менять точку останова (xs) вложенных/дочерних столбцов. Используйте col-lg-6 на вложенном столбце, если вы хотите, чтобы на больших экранах была 50% -ная ширина его родителя. Если вы хотите, чтобы 50% родительского элемента на всех экранах использовали col-xs-6 на вложенном столбце.

Answer 2

Вы можете использовать это, попытайтесь понять это

<div class="container-fluid" style="border:1px solid"> 
    <div> 
    Let's say the container is 1200px 
    </div> 
    <div class="row"> 
    <div class="col-sm-4" style="border:1px solid blue;"> 
     <div> 
       This div size should be 1200/4=300px   
     </div> 
     <div class="row"> 
     <div class="col-sm-6" style="border:1px solid red;"> 
      This use col-sm-6 
     </div> 
     </div> 
    </div> 
    </div> 
    How can I have the red box to use the <b>xs/sm</b> size and use half of the 300px ? 
</div><!-- /.container --> 

В принципе, вам не нужно использовать Л.Г. на все, просто использовать см и понять его первым. http://www.bootply.com/eMimw5tMGd