Локально обрабатывать столбцы в одной строке

Как я могу упорядочить столбцы в пределах одной строки? У меня есть один веб-сайт с 5 разделами, каждый из которых имеет 100% ширину и высоту экрана.Локально обрабатывать столбцы в одной строке

То, что я на рабочем столе в моем первом разделе (A и C содержит изображения, как background-image, B является ДИВ с h1 элементом):

---------------------------------------- 
|   |     |   | 
|   |     |   | 
| A  |  B   |  C | 
| col-lg-3 |  col-lg-6  | col-lg-3 | 
|   |     |   | 
|   |     |   | 
----------------------------------------

То, что я хочу иметь на маленьких экранах (смартфоны):

------------- 
|    | 
|  B  | 
|    | 
------------- 
|  |  | 
|  |  | 
| A | C | 
|  |  | 
|  |  | 
-------------

Я пытался использовать Bootstrap в push и pull классов, но они нарушили мою один-верстку, и я хочу, чтобы сохранить A, B и C в течение одного полноэкранный раздел. Любая помощь оценили :) Большое спасибо!

Edit:

Вот некоторые из моей HTML:

<div class="row section first"> 
    <div class="col-sm-12 col-lg-6" id="B"><h1>Header</h1></div> 
    <div class="col-sm-6 col-lg-3 col-lg-pull-6" id="A"></div> 
    <div class="col-sm-6 col-lg-3" id="C"></div> 
</div> 

<div class="row section second"> 
    <div>second section content...</div> 
</div>

... и мои CSS фрагментов:

body { 
    width: 100vw; 
} 

.section { 
    height: 100vh; 
} 

#B h1 { 
    font-family : 'Lobster', Impact; 
    font-weight : 400; 
    font-size  : 8vw; 
    letter-spacing: -4px; 
    position  : relative; 
    top   : 30%; 
    color   : #66678B; 
    margin-top : 300px; 
    text-shadow : 5px 5px rgb(226, 226, 233); 
} 

div#A { 
    background   : url('./img/A.png') no-repeat; 
    background-size : contain; 
    background-position: bottom center; 
    height    : 100%; 
    margin-top   : 25px; 
    margin-right  : -75px; 
    padding-top  : 5px; 
} 

div#C { 
    background   : url('./img/C.png') no-repeat; 
    background-size : contain; 
    background-position: bottom center; 
    height    : 100%; 
    margin-top   : 25px; 
    margin-left  : -75px; 
    padding-top  : 5px; 
}

источник

2015-07-03 kjuri

Чтобы разработать этот макет, вы можете попробовать использовать mobile-first методология. То есть сначала спроектируйте макет на маленьком экране, затем больше с помощью классов «pull» и «push».

В этом случае, первый для второго макета:

<div class="row"> 
    <div class="col-sm-12"> B </div> 
    <div class="col-sm-6"> A </div> 
    <div class="col-sm-6"> C </div> 
</div>

Затем изменить его в соответствии с первой раскладкой:

<div class="row"> 
    <div class="col-sm-12 col-lg-6"> B </div> 
    <div class="col-sm-6 col-lg-3 col-lg-pull-6"> A </div> 
    <div class="col-sm-6 col-lg-3"> C </div> 
</div>

источник

2015-07-04 02:56:04

Спасибо за ваш ответ, но мой макет еще нарушение, когда я изменить размер окна браузера. Я имею в виду, что когда ширина окна мала, элементы B и A находятся там, где они должны быть, но элемент C переходит к следующему разделу - как я уже упоминал, A и C являются div с изображениями в качестве фона, и эти изображения должны быть рядом с каждым Другие. Я отредактировал свой вопрос и предоставил фрагменты кода. – kjuri

Я заметил, что в вашем css вы указали высоту и ширину div, это может сломать функциональность сетки бутстрапа. Я рекомендую сначала удалить их и посмотреть, может ли макет работать, а затем настроить маржу или дополнение с помощью отладчика браузера. Вот рабочая скрипка: https: // jsfiddle.net/tooWhite/k8pfLwap/7/embedded/result/ –

Наконец-то, у меня есть смешанная сетка бутстрапа с запросами на медиатеку CSS и достигнуто то, что я хотел :) Большое спасибо за вашу помощь :) – kjuri

flexbox может сделать

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 50%; 
 
    margin: 10px auto; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
} 
 
.a, 
 
.b, 
 
.c { 
 
    height: 50px; 
 
    border: 1px solid grey; 
 
    order: 1; 
 
    line-height: 50px; 
 
} 
 
.b { 
 
    flex-grow: 2; 
 
    /* twice as wide */ 
 
    flex-basis: 100%; 
 
    background: lightblue; 
 
    order: 0; 
 
    /* move the element to first in line */ 
 
} 
 
.a, 
 
.c { 
 
    flex-basis: 50%; 
 
    background: red; 
 
    flex-grow: 0; 
 
} 
 
.c { 
 
    background: lightgreen; 
 
} 
 
@media screen and (min-width: 600px) { 
 
    .container { 
 
    flex-direction: row; 
 
    flex-flow: nowrap; 
 
    } 
 
    .a, 
 
    .b, 
 
    .c { 
 
    flex: 1; 
 
    flex-grow: 1; 
 
    order: 1; 
 
    } 
 
}

<div class="container"> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
    <div class="c">C</div> 
 
</div>

JSfiddle Demo

источник

2015-07-03 23:19:37

<div class="container"> 
    <div class="row"> 
    <div class="b col-sm-12 col-lg-6 col-lg-push-3">B</div> 
    <div class="a col-sm-6 col-lg-3 col-lg-pull-6">A</div> 
    <div class="c col-sm-6 col-lg-3">C</div> 
    </div> 
</div>

fiddle.

a, b и c в div класса не необходимы и используются только для демонстрационных целей.

источник

2015-07-04 02:36:29

Локально обрабатывать столбцы в одной строке

ответ

Смежные вопросы