Как получить этот макет отзывчивым?

Я не могу понять, как получить мое расположение, чтобы быть, как это должно, идея для того, чтобы быть похожим на следующее:Как получить этот макет отзывчивым?

+-------------------------------------------------+ 
    | logo  |   Menu      | 
    |   |------------------------------------+ 
    |------------|         | 
    |   |         | 
    |Menu  | where the layout will change  | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    |   |         | 
    |------------|------------------------------------| 
    | logo  |   footer     | 
    +-------------------------------------------------+

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

<body class="sidebar-mini"> 
    <div class="wrapper "> 
     <div class="col-sm-2 col-lg" style="background-color: #252525;"> 
      <div class="row navbar" style="text-align: center; vertical-align: middle; padding-top: 35px;"> 
       <img src="~/Images/tecbox/logo_tecbox.png" style="max-height: 80px;" /> 
      </div> 
      <div class="row"> 
       <!-- sidebar: style can be found in sidebar.less --> 
<section class="sidebar"> 
    <ul class="sidebar-menu"> 
     <li class="menu-principal"> 
      <a href="~/Home/Cadastros" style="background-color: #375DC0;"> 
       @*<i class="fa fa-envelope"></i>*@ <span>Cadastros</span> 
       @*<small class="label pull-right bg-yellow">12</small>*@ 
      </a> 
     </li> 
     <li class="menu-principal"> 
      <a href="pages/mailbox/mailbox.html" style="background-color: #8e4e71;"> 
       @*<i class="fa fa-envelope"></i>*@ <span>Movimentações</span> 
       @*<small class="label pull-right bg-yellow">12</small>*@ 
      </a> 
     </li> 
     <li class="menu-principal"> 
      <a href="pages/mailbox/mailbox.html" style="background-color: #CE603B; "> 
       @*<i class="fa fa-envelope"></i>*@ <span>Financeiro</span> 
       @*<small class="label pull-right bg-yellow">12</small>*@ 
      </a> 
     </li> 
     <li class="menu-principal"> 
      <a href="pages/mailbox/mailbox.html" style="background-color: #E38C23; "> 
       @*<i class="fa fa-envelope"></i>*@ <span>Comercial</span> 
       @*<small class="label pull-right bg-yellow">12</small>*@ 
      </a> 
     </li> 
     <li class="menu-principal"> 
      <a href="pages/mailbox/mailbox.html" style="background-color: #96A040; "> 
       @*<i class="fa fa-envelope"></i>*@ <span>Configurações</span> 
       @*<small class="label pull-right bg-yellow">12</small>*@ 
      </a> 
     </li> 
     <li class="menu-principal"> 
      <a href="pages/mailbox/mailbox.html" style="background-color: #DEB887; "> 
       @*<i class="fa fa-envelope"></i>*@ <span>Relatórios</span> 
       @*<small class="label pull-right bg-yellow">12</small>*@ 
      </a> 
     </li> 
    </ul> 
</section> 
      </div> 
      <div class="row" style="margin-top: 60px; text-align:center; background-color: #363636"> 
       <img src="~/Images/logo-infoworld.png" style="max-width: 150px;" /> 
      </div> 
     </div> 
     <div class="col-lg-10 text-center" style="background-color: black;"> 
      <div class="row navbar navbar-static-top" style="background-color: steelblue;"> 
       <div class="navbar-custom-menu" style="width: 100%;"> 
        <div class="col-md-4" style="text-align: left;"> 
         <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" style="height: 60px;"> 
          <span class="sr-only">Toggle navigation</span> 
         </a> 
         <a href="@Url.Action("Index")" style="color: white; font-size: 20px;"> 
          <img src="~/Images/tecbox/icons/home-icon.png" style="max-height: 40px; padding-left: 5px;" /> 
          <span class="hidden-xs">Home</span> 
         </a> 
        </div> 

        <div class="col-md-4" style="color: white;"> 
         <span>nome da loja - bla bla - bla bla</span> 
        </div> 
        <div class="col-md-4" style="text-align: right;"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
          <span class="hidden-xs" style="padding-right: 10px;">Negrini</span> 
          <img src="~/Images/tecbox/semFoto300x300.png" alt="Foto" class="image-semfoto" /> 
         </a> 
         <ul class="dropdown-menu menu-superior"> 
          <!-- User image --> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Alterar imagem da conta</b> 
            </span> 
           </a> 
          </li> 
          <li> 
           <hr class="divider" /> 
          </li> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Alterar senha</b> 
            </span> 
           </a> 
          </li> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Histórico de acessos</b> 
            </span> 
           </a> 
          </li> 
          <li> 
           <hr class="divider" /> 
          </li> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Trocar loja</b> 
            </span> 
           </a> 
          </li> 
          <li> 
           <hr class="divider" /> 
          </li> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Bloquear</b> 
            </span> 
           </a> 
          </li> 
          <li> 
           <hr class="divider" /> 
          </li> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Sobre</b> 
            </span> 
           </a> 
          </li> 
          <li> 
           <hr class="divider" /> 
          </li> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Trocar usuário</b> 
            </span> 
           </a> 
          </li> 
          <li class="user-header"> 
           <a> 
            <span> 
             <b>Sair</b> 
            </span> 
           </a> 
          </li> 
         </ul> 
         <a href="#" data-toggle="control-sidebar" style="height: 60px;"><i class="fa fa-gears"></i></a> 
        </div> 
        <!-- Control Sidebar Toggle Button --> 

       </div> 
      </div> 
      <div class="row"> 
       <section class="content" ng-model="idForTransactions" ng-controller="MainController"> 
        <!-- sidebar: style can be found in sidebar.less --> 
        <section class="sidebar"> 
         <ul class="sidebar-menu"> 
          <li class="menu-principal"> 
           <a href="~/Home/Cadastros" style="background-color: #375DC0;"> 
            @*<i class="fa fa-envelope"></i>*@ <span>Cadastros</span> 
            @*<small class="label pull-right bg-yellow">12</small>*@ 
           </a> 
          </li> 
          <li class="menu-principal"> 
           <a href="pages/mailbox/mailbox.html" style="background-color: #8e4e71;"> 
            @*<i class="fa fa-envelope"></i>*@ <span>Movimentações</span> 
            @*<small class="label pull-right bg-yellow">12</small>*@ 
           </a> 
          </li> 
          <li class="menu-principal"> 
           <a href="pages/mailbox/mailbox.html" style="background-color: #CE603B; "> 
            @*<i class="fa fa-envelope"></i>*@ <span>Financeiro</span> 
            @*<small class="label pull-right bg-yellow">12</small>*@ 
           </a> 
          </li> 
          <li class="menu-principal"> 
           <a href="pages/mailbox/mailbox.html" style="background-color: #E38C23; "> 
            @*<i class="fa fa-envelope"></i>*@ <span>Comercial</span> 
            @*<small class="label pull-right bg-yellow">12</small>*@ 
           </a> 
          </li> 
          <li class="menu-principal"> 
           <a href="pages/mailbox/mailbox.html" style="background-color: #96A040; "> 
            @*<i class="fa fa-envelope"></i>*@ <span>Configurações</span> 
            @*<small class="label pull-right bg-yellow">12</small>*@ 
           </a> 
          </li> 
          <li class="menu-principal"> 
           <a href="pages/mailbox/mailbox.html" style="background-color: #DEB887; "> 
            @*<i class="fa fa-envelope"></i>*@ <span>Relatórios</span> 
            @*<small class="label pull-right bg-yellow">12</small>*@ 
           </a> 
          </li> 
         </ul> 
        </section> 
       </section> 
      </div> 
      <div class="row bg-fuchsia bottom" style="padding: 15px;"> 
       rodapé 
      </div> 
     </div> 
    </div> 
<-- scripts --> 
</body>

реальная ситуация: http://i.stack.imgur.com/yHcRo.png

как нота, ни одна из сторон достигает нижней части экрана.

источник

2015-08-12 Luiz Negrini

Вы хотите, чтобы реагировать только внутри области содержимого? где говорится «где будет изменяться макет»? – odedta

Посмотрите на свою третью строку, один из классов говорит 'col-lg' - я уверен, что вам нужно установить значение. то есть 'col-lg-2'. Кроме того, похоже, что некоторые из разделов не закрыты в правильном порядке. – odedta

просто хочу сказать, какие изменения экран является той частью. на незакрытом div все они закрыты =/ –

Этот макет то, что вам нужно работать и отзывчив:

<div class="row"> 
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><!--START NAVBAR--> 
     <nav> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <img src="http://welcome.hp-ww.com/country/us/en/cs/images/i/header-footer/caas-hf-v3/hp-logo.gif" alt="lala" /> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <ul> 
         <li>1</li> 
         <li>2</li> 
         <li>3</li> 
         <li>4</li> 
        </ul> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <img src="http://welcome.hp-ww.com/country/us/en/cs/images/i/header-footer/caas-hf-v3/hp-logo.gif" alt="lala" /> 
       </div> 
      </div> 
     </nav> 
    </div><!--END NAVBAR--> 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10"><!--START CONTENT--> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       Blue bar 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       Black bar 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       Pink bar 
      </div> 
     </div> 
    </div><!--END CONTENT--> 
</div>

источник

2015-08-12 17:56:20 odedta

Этот макет не заполняет мой экран. –

, пожалуйста, см. Соответствующую ссылку –

Просто для построения макета, это поможет вам быстро создать обертку и понять, как работает сетка рельефа. Надежда помогла вам! С уважением Создатель интерфейса для бункеров http://www.layoutit.com/ru –

Как получить этот макет отзывчивым?

ответ

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