Отзывчивая сетка Bootstrap с правой фиксированной боковой панелью

Я хотел бы создать шаблон с такой начальной загрузкой, которая учитывает адаптивную систему сетки:

шаблон

На картинке панель навигации и правая сторона (которая содержит две кнопки) закреплены (всегда отображаются в представлении).

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


css twitter-bootstrap twitter-bootstrap-3
person doums    schedule 21.09.2016    source источник
comment
Вы хотите, чтобы боковая панель была частью 12 столбцов (шириной 1 или 2 столбца) или 12 столбцов должны быть такой же ширины, как основной контент (является ли он частью сетки или нет)? правый блок будет считаться одной строкой: а? Вы имели в виду одну колонку?   -  person FelipeAls    schedule 21.09.2016
comment
Да, я хочу, чтобы моя боковая панель была частью сетки (шириной в 1 столбец).   -  person doums    schedule 21.09.2016

Ответы (3)


arrow_upward
3
arrow_downward

Создайте оболочку вокруг всей сетки Bootstrap (контейнер>строка>столбцы..), чтобы содержать фиксированную навигацию и правую боковую панель.

<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

person Zim    schedule 21.09.2016
comment
Я не знал, хорошо ли для хорошей отзывчивой системы создавать оболочку вокруг сетки, а не встраивать ее в сетку? - person doums; 21.09.2016
comment
Нет ничего плохого в том, чтобы содержать сетку внутри внешней оболочки. Важно то, что вложенная сетка использует container-fluid > row > cols - person Zim; 22.09.2016

arrow_upward
1
arrow_downward

Вы могли бы разделить их в соответствующие контейнеры <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>

Таким образом, правая сторона отделяется от основного контента. Опять же, возможно, я неправильно истолковал вопрос.

person zureka    schedule 21.09.2016
comment
Да, но с помощью этого метода ширина правой стороны равна ширине класса col, и эту ширину невозможно настроить правильно? - person doums; 21.09.2016
comment
Если вы хотите выполнить пользовательское форматирование ширины столбца, я бы порекомендовал посмотреть по этой ссылке, особенно в разделе Custom Container Sizes. - person zureka; 21.09.2016

arrow_upward
1
arrow_downward

Вы ищете что-то подобное? Вы можете настроить ширину правого контейнера по своему желанию. Нет необходимости редактировать 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>
person Safal Pillai    schedule 21.09.2016