Как расположить div-ы с помощью bootstrap

188

01 июля 2019, 03:20

нужно сделать вот такой макет

Navbar есть.

Под ним стандартный

<div class="container body-content">
        @RenderBody()
        <hr/>
        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>

Нужно вставить вот такой макет (каряво нарисованный конечно) между navbar (сверху чёрная полоска) и div-ом с @RenderBody() c с помощью bootstrap.

Причём левый и правый блоки (синие) должны быть зафиксированные.

Перепробовал кучу вариантов, но не чего не получилось. То левый перескакивает куда-та, то правый исчезает. То вообще всё в столбик выстраивается. HELP!!!

Сделал вот так

<div class="row">
    <div class="row center-block">
        <div id="leftDiv" style="background-color: aqua; " class="col-lg-2">
            left div
        </div>
        <div style="background-color: darkgoldenrod;" class="col-lg-8">
            <div style="background-color: crimson;" class="col-lg-6">
                Название
            </div>
            <div style="background-color: crimson;" class="col-lg-6">
                Начальник
            </div>
            <div style="background-color: darkgrey;" class="col-lg-6">
                имущество
            </div>
            <div style="background-color: darkgrey;" class="col-lg-6">
                сотрудники
            </div>
        </div>
        <div id="rightDiv" style="background-color: aqua;" class="col-lg-2">
            right div
        </div>
    </div>
</div>

Но не пойму как зафиксировать синие блоки по краям, что бы они были до конца экрана и не двигались как navbar до footera. И серый в центре был тоже до конца экрана до footera.

Answer 1

body { 
  margin: 0; 
  width: 100%; 
  height: 100vh; 
} 
 
.header { 
  width: 100%; 
  height: 10%; 
  background-color: #000000; 
} 
main { 
  width: 100%; 
  height: 90%; 
  background-color: #ffeeee; 
  display: flex; 
} 
 
aside { 
  flex: 0 1 30%; 
  background-color: #aaccff; 
} 
 
section { 
  flex: 1 0 40%; 
  background-color: #ffff00; 
} 
 
section nav { 
  width: 100%; 
  height: 10%; 
  background-color: #ff0000; 
} 
 
section article { 
  width: 100%; 
  height: 90%; 
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
} 
 
section article div { 
  flex: 0 0 calc(50% - 20px); 
  height: calc(100% - 20px); 
  background-color: #cccccc; 
}

<header class="header"></header> 
<main> 
  <aside class="aside-left"> 
     
  </aside> 
  <section> 
    <nav></nav> 
    <article> 
      <div></div> 
      <div></div> 
    </article> 
  </section> 
  <aside class="aside-right"> 
     
  </aside> 
</main>