начальной загрузки - перейти к следующей колонке

Question

Когда сайт выходит на -lg- размер Я хочу, чтобы выглядеть следующим образом:

желаемого результата:

Но я только в конечном итоге с этим:

Фактический результат:

<div class="container"> 

    <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div> 
    <div class="clearfix"> 
    </div> 

    <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div> 

    <div class="content"> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div class="clearfix"></div> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    <div class="clearfix"></div> 

    </div> 

</div> 

возможно ли то, что я хочу о r - это не оптимальный дизайн для бутстрапа?

https://jsfiddle.net/clankill3r/0o1mz65n/

Answer 1

Добавить content класс для установки с col-xs-12 col-lg-8 и content класса добавить левый и правый отступы 0, чтобы установить, как вам нравится ..

#title { 
 
    background-color: aqua; 
 
} 
 

 
#menu { 
 
    background-color: aquamarine; 
 
} 
 

 
.content { 
 
    background-color: orange; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
} 
 

 
// Small devices (landscape phones, 34em and up) 
 
@media (max-width: 33.9em) { 
 
    body { 
 
    background-color: rgba(10,10,200,0.2); 
 
    } 
 
} 
 

 
// Small devices (landscape phones, 34em and up) 
 
@media (min-width: 34em) { 
 
    body { 
 
    background-color: rgba(10,10,200,0.1); 
 
    } 
 
} 
 

 
// Medium devices (tablets, 48em and up) 
 
@media (min-width: 48em) { 
 
    body { 
 
    background-color: rgba(10,10,200,0.2); 
 
    } 
 
} 
 

 
// Large devices (desktops, 62em and up) 
 
@media (min-width: 62em) { 
 
    body { 
 
    background-color: rgba(10,10,200,0.3); 
 
    } 
 
} 
 

 
// Extra large devices (large desktops, 75em and up) 
 
@media (min-width: 75em) { 
 
    body { 
 
    background-color: rgba(10,10,200,0.4); 
 
    } 
 
}

<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
    <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div> 
 
    <div class="clearfix"> 
 
    </div> 
 

 
    <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div> 
 

 
    <div class="content col-xs-12 col-lg-8"> 
 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div> 
 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div> 
 
    <div class="clearfix"></div> 
 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div> 
 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div> 
 
    <div class="clearfix"></div> 
 

 
    </div> 
 
    
 
</div>

Answer 2

Что о добавлении коллектив- lg-4 в контент div?

<div class="container"> 

    <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div> 
    <div class="clearfix"> 
    </div> 

    <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div> 

    <div class="content col-lg-4"> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Foo<br/>Foo<br/>Foo<br/>Foo</div> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Bar<br/>Bar<br/>Bar<br/>Bar</div> 
    <div class="clearfix"></div> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Ham<br/>Ham<br/>Ham<br/>Ham</div> 
    <div class="col-xs-12 col-lg-4 col-lg-offset-4">Jam<br/>Jam<br/>Jam<br/>Jam</div> 
    <div class="clearfix"></div> 

    </div> 

</div> 

https://jsfiddle.net/t528eozd/

Answer 3

Если вы проверяете версию Bootstrap CSS, вы заметите, что вы используете неправильный класс, чтобы компенсировать. col-xx-offset-x - это старый класс смещения. Ваша версия использует offset-xx-x (т. Е. Offset-lg-4).

Также вам нужно только одно смещение - на вашем div, содержащем четыре ветчины.

Updated JSFiddle

<div class="col-xs-12 col-lg-4 offset-lg-4">Ham 
    <br/>Ham 
    <br/>Ham 
    <br/>Ham 
</div> 

Примечание - я предлагаю более чистый способ установки этого вверх, используя row класс вместо clearfix несколько раз.

Here is a Demo

EDIT/UPDATE - Более технически правильный вариант с использованием строк и отделяя меню в его собственной col-lg-4 и Foo, Bar, Хама и Джем в col-lg-8, который содержит две строки. Это также устраняет необходимость в смещении.

Here it is