Сделать одну загрузочную сетку, уложенную в другую, когда другие решетки по-прежнему неактивны

Я строю сайт с Bootstrap. Я все еще новичок в Boostrap и теперь все еще борюсь с гибким дизайном сетки.Сделать одну загрузочную сетку, уложенную в другую, когда другие решетки по-прежнему неактивны

Так что мой вопрос: если я хочу иметь строку с 4 столбцами, когда экран большой, но когда экран находится на среднем уровне, я хочу, чтобы он стал всего тремя столбцами, один из которых должен быть уложен в другой столбец (т.е. столбец 3 укладывается в верхнюю часть столбца 4).

Чтобы было ясно, что я продемонстрирую свой дизайн:

Когда экран велик:

Когда экран среднего, становятся:

колонны (питания укладывается в верхней части колонны chatbar):

Над фотографии просто манекен я создал с HTML таблицы

Как этого добиться? Это можно сделать, используя чистую загрузку css?

источник

2017-02-12 Taufik Nur Rahmanda

У вас есть код до сих пор? Наилучший подход - начать с разметки для макета среды, а затем настроить его как необходимость в большом макете. – ZimSystem

Да. Конечно, у меня это есть. Я уже достиг этого, используя функцию jQuery preend. Идея заключается в перемещении материалов в столбец 4, который запускается при событии изменения размера $ (окна) и использовании класса hidden-md до hidden-xs в исходном столбце «stuff». Но я все еще жду ответа, если использовать чистую загрузку css выполнимо. Благодарим за предложение. –

Да, должно быть возможно только с Bootstrap, но вам нужно начать с некоторой разметки для строк/cols. – ZimSystem

Вы можете использовать вложенные столбцы, как это ...

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2 col-sm-2"> 
      sidebar 
     </div> 
     <div class="col-md-5 col-sm-6"> 
      newsfeed 
     </div> 
     <div class="col-md-5 col-sm-2"> 
      <div class="row"> 
       <div class="col-md-6 col-sm-12"> 
        stuff 
       </div> 
       <div class="col-md-6 col-sm-12"> 
        chatbar 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

Кроме того, вы не указали см/Xs экраны, так это расположение будут расположены вертикально на Xs экранах , Вы можете предотвратить это путем изменения -sm- к -xs-

http://www.codeply.com/go/DC9wMAszTC

источник

2017-02-13 11:29:07 ZimSystem

Отлично! Это именно то, что я ищу. Огромное спасибо. : D –

попробовать эту марку up--

изменить ширину браузера, чтобы увидеть эффект.

EDIT

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

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      </head> 
 
      <body> 
 
      <div class="row"> 
 
      <div class="col-lg-2 col-md-2" style="background-color: red;"> 
 
      sidebar 
 
      </div> 
 
      <div class=" col-lg-5 col-md-6 " style="background-color: black;"> 
 
      newsfeed 
 
      </div> 
 
      <div class="col-md-4 col-lg-5"> 
 
       <div class="row"> 
 
      <div class="col-md-12 col-lg-4 " style="background-color: blue;"> 
 
      
 
      stuffs 
 
      </div> 
 
      <div class="col-md-12 col-lg-8 " style="background-color: green;"> 
 
      
 
      
 
      chatbar 
 
      </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      </body> 
 
      </html>

источник

2017-02-13 09:05:50 neophyte

Спасибо, но это не то, что я хотел. Я редактировал свой вопрос и добавлял несколько фотографий. Проверьте их, если вы не возражаете. –

Сделать одну загрузочную сетку, уложенную в другую, когда другие решетки по-прежнему неактивны

ответ

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