我无法弄清楚如何让我的布局成为应该如何，它的想法是如下：
+-------------------------------------------------+
| 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>
作为注释，任何一方都不会到达屏幕的底部。
答案 0 :(得分：0)
这种布局是您需要使用的并且具有响应性：
<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>