All geek questions in one place

Loading grid with the correct fixed side panel

I would like to create a template with a bootstrap similar to the one that takes into account the grid-based system:

template

In the picture, the navigation bar and the right side (which contains two buttons) are sticky (always displayed on the screen)

My problem is the right side, because in the bootstrap system, the right side block will be considered as one line, and the main content contains multiple lines. How can i do this?

+4
source share
3 answers

Bootstrap (p > a > cols..), .

<div class="wrapper">
        <!-- top nav -->
        <nav>
            ...
        </nav>

        <!-- main -->
        <div class="left" id="main">
            <div class="container-fluid">
                <h1>Bootstrap Grid...</h1>
            </div>
        </div>

        <!-- sidebar -->
        <div class="right" id="sidebar">
            Fixed right sidebar
        </div>
</div>

http://www.codeply.com/go/37bttGte6c

+3

<div>, :

<body>
    <div class="navbar navbar-default"> Navbar </div>

    <div class="main-content col-md-10"> Main Content </div>

    <div class="right-btn-group col-md-2"> Right buttons </div>
</body>

, . .

+1

- ? . bootstrap.css .

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    body{
      width: 100%;
      height: 100%;
      color: #fff;
    }
    header, footer{
      height: 100px;
    }
    header{
      width: 100%;
      background: #000;
    }
    .content-container{
      width: 100%;
      position: relative;
    }
    .left-container{
      width: calc(100% - 90px); /* adjust */
      height: 100%;
    }
    .right-container{
      width: 90px; /* adjust */
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      background: blue;
    }
    .main-content{
      height: 500px;
      background: #ff0000;
    }
    footer{
      width: 100%;
      background: #ed1899;
    }
  </style>
</head>
<body>
<div class="container-fluid">
  <div class="row">

    <header class="nav">nav bar</header>

    <div class="content-container">

      <div class="left-container">
        <div class="main-content">
          //main content
        </div>
        <footer>
          //footer content
        </footer>
      </div>

      <div class="right-container">buttons</div>

    </div>

  </div>
</div>
</body>
</html>
+1

Source: https://habr.com/ru/post/1655321/

More articles:


All Articles